18041 sujets

Questions générales et questions de débutants

Comment remplacer le contenu d'un div lors d'un clic

Salut à tous,

Je voulais savoir comment faire pour pouvoir changer de texte dans un div en cliquant sur une image?

Dans mon exemple, lorsque je voudrais cliquer sur une des images du div 1, je voudrais que le texte du div 2 change.

Merci d'avance pour vos réponse


<style type="text/css">
#1 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#2 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 500px;
}
</style>
</head>

<body>
<div id="1"><img src="http://data.imagup.com/2/1105095357.gif" width="25" height="15" />Fr <img src="http://data.imagup.com/2/1105095400.gif" width="25" height="15" />All</div>
<div id="2">A</div>
</body>
</html>

Modifié par qwertz1 (22 Nov 2010 - 13:13)
Bonjour Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Pourrais-tu également modifier le titre de ton sujet afin qu'il donne une indication concernant le problème rencontré ?

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Salut qwertz1,

Il faut utiliser un petit javascript de ce type :


<body>
	<div id="1">
		<img src="http://data.imagup.com/2/1105095357.gif" width="25" height="15" onclick="affiche_text('mon texte 1');"/>Fr 
		<img src="http://data.imagup.com/2/1105095400.gif" width="25" height="15" onclick="affiche_text('mon texte 2');"/>All
	</div>
	<div id="2">
		A
	</div>
</body>



<script language="JavaScript">

	function affiche_text(text){
		document.getElementById("2").innerHTML = text;
	}

</script>
Un grand merci à toi!

j'ai juste une dernier petit question. Comment dois-je faire pour pouvoir mettre mon texte en forme (je voudrais qu'il apparait comme le contenu d'origine du div 2)?


<style type="text/css">
#1 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#2 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 500px;
}
</style>
<script language="javascript"> 
function affiche_text(text) { 
document.getElementById("2").innerHTML = text; 
} 
</script>
</head>

<body>
<div id="1"><img src="http://data.imagup.com/2/1105095357.gif"
onclick="affiche_text('A');"
height="15" width="25">
<img src="http://data.imagup.com/2/1105095400.gif"
onclick="affiche_text('B');"
height="15" width="25">
</div>
<div id="2"><strong style="color: rgb(68, 68, 68);"><span
style="font-size: 12px;">X <span
style="color: red;">X</span> (<span style="color: red;">X</span>)X X <span style="color: red;">X</span> X</span></strong><br />
  <br /><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 10px;">X</span></strong></div>
</div>
</body>
</html>

Modifié par qwertz1 (22 Nov 2010 - 15:24)
C'est pas qu'elles sont dédoublées, c'est juste que tu leur as attribué une hauteur trop grande.
Un grand merci à toi!

j'ai juste une dernier petit question. Comment dois-je faire pour pouvoir mettre mon texte en forme (je voudrais qu'il apparait comme le contenu d'origine du div 2)?


<style type="text/css">
#1 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#2 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 500px;
}
</style>
<script language="javascript"> 
function affiche_text(text) { 
document.getElementById("2").innerHTML = text; 
} 
</script>
</head>

<body>
<div id="1"><img src="http://data.imagup.com/2/1105095357.gif"
onclick="affiche_text('A');"
height="15" width="25">
<img src="http://data.imagup.com/2/1105095400.gif"
onclick="affiche_text('B');"
height="15" width="25">
</div>
<div id="2"><strong style="color: rgb(68, 68, 68);"><span
style="font-size: 12px;">X <span
style="color: red;">X</span> (<span style="color: red;">X</span>)X X <span style="color: red;">X</span> X</span></strong><br />
  <br /><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 10px;">X</span></strong></div>
</div>
</body>
</html>
J'ai du mal à comprendre ce que tu veux faire exactement. Le style de ton div est défini dans ta feuille de style en entête de ta page. Si tu veux que ton texte soit rouge, il faut le spécifier ici :


#2 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 500px;
        color: red;
}


Maintenant si tu veux insérer des balises spécifiques au moment où tu cliques sur l'image, tu peux faire ça dans ta balise img :


onclick="affiche_text('<span style: color: red;>X<span>');"
a écrit :
Maintenant si tu veux insérer des balises spécifiques au moment où tu cliques sur l'image, tu peux faire ça dans ta balise img :


onclick=&quot;affiche_text('&lt;span style: color: red;&gt;X&lt;span&gt;');&quot;


C'est exactement ça que je veux faire. Exemple je reprend l'origine de mon div 2 mais je remplace simplement les X par des A. Mais ca ne fontionne pas!

<strong style="color: rgb(68, 68, 68);"><span

style="font-size: 12px;">X <span

style="color: red;">X</span> (<span style="color: red;">X</span>)X X <span style="color: red;">X</span> X</span></strong><br />

  <br /><strong style="color: rgb(68, 68, 68);"><span

  style="font-size: 10px;">X</span></strong>


<style type="text/css"> 
#1 { 
width: 500px; 
margin-right: auto; 
margin-left: auto; 
text-align: center; 
} 
#2 { 
width: 500px; 
margin-right: auto; 
margin-left: auto; 
text-align: center; 
height: 500px; 
} 
</style> 
<script language="javascript"> 
function affiche_text(text) { 
document.getElementById("2").innerHTML = text; 
} 
</script> 
</head> 

<body> 
<div id="1"><img src="http://data.imagup.com/2/1105095357.gif" 
onclick="affiche_text('<strong style="color: rgb(68, 68, 68);"><span

style="font-size: 12px;">A <span

style="color: red;">A</span> (<span style="color: red;">A</span>)A A <span style="color: red;">A</span> A</span></strong><br />

  <br /><strong style="color: rgb(68, 68, 68);"><span

  style="font-size: 10px;">X</span></strong>');" 
height="15" width="25"> 
<img src="http://data.imagup.com/2/1105095400.gif" 
onclick="affiche_text('B');" 
height="15" width="25"> 
</div> 
<div id="2"><strong style="color: rgb(68, 68, 68);"><span 
style="font-size: 12px;">X <span 
style="color: red;">X</span> (<span style="color: red;">X</span>)X X <span style="color: red;">X</span> X</span></strong><br /> 
<br /><strong style="color: rgb(68, 68, 68);"><span 
style="font-size: 10px;">X</span></strong></div> 
</div> 
</body> 
</html>
Aïe aïe aïe ! C'est un problème d'imbrication de guillemets et ça, c'est très chiant. Je sais faire en mettant la chaine de caractère dans la fonction javascript mais sinon, il faut chercher la bonne combinaison et là, je laisse faire d'autres alsanautes plus patients...

Si tu fais ça, ça marche mais si ta fonction se complique un jour, c'est pas génial...


<script language="javascript"> 

function affiche_text(id) { 
	if (id == "1"){
		var text = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>A <span style='color: red;'>A</span> (<span style='color: red;'>A</span>)A A <span style='color: red;'>A</span> A</span></strong><br />  <br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 10px;'>X</span></strong>";
	}
	else{
		var text = "B";
	}
	document.getElementById("2").innerHTML = text; 
} 

</script> 

</head> 



<body> 

<div id="1">
	<img src="http://data.imagup.com/2/1105095357.gif" onclick="affiche_text('1');" height="15" width="25"> 
	<img src="http://data.imagup.com/2/1105095400.gif" onclick="affiche_text('2');" height="15" width="25"> 
</div> 

<div id="2">
	<strong style="color: rgb(68, 68, 68);"><span style="font-size: 12px;">X <span style="color: red;">X</span> (<span style="color: red;">X</span>)X X 
	<span style="color: red;">X</span> X</span></strong><br /><br /><strong style="color: rgb(68, 68, 68);"><span style="font-size: 10px;">X</span></strong>
</div> 

</body>
Ok merci.

j'ai un dernier petit problème, je souhaite lorsque je clique sur une des images du div "C1" que celui-ci modifie le texte de "C3 et C5" mais apparament il y a un problème avec le code, car seul "C5" se modifie


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#CP {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	line-height: 13px;
}
#C1 {
	width: 780px;
	text-align: center;
}
#E1 {
	height: 30px;
	width: 780px;
	clear: both;
}
#C3 {
	text-align: center;
	width: 780px;
	font-family: "Lucida Grande";
	line-height: 16px;
}
#E2 {
	height: 40px;
	width: 780px;
}
#C4 {
	width: 780px;
}
#E3 {
	height: 40px;
	width: 780px;
	clear: both;
}
#C5 {
	text-align: justify;
	width: 780px;
	font-family: "Century Gothic";
	font-size: 11px;
}
</style>
<script language="javascript">
function remplace(image) {
document.getElementById("C8").innerHTML="<img src='"+image+"'>";
}
</script>
<script language="javascript">  
function affiche_text(id) {  
if (id == "C1"){ 
var text = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>A</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>A</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>A</span></strong>"; 
} 
else{ 
var text = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>B</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>B</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>B</span></strong>"; 
} 
document.getElementById("C3").innerHTML = text;  
}  
function affiche_text(id) {  
if (id == "C1"){ 
var text = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>C</span></strong>"; 
} 
else{ 
var text = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>D</span></strong>"; 
} 
document.getElementById("C5").innerHTML = text;  
}  
</script>
</head>

<body>
<div id="CP">
  <div id="C1">
  <img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('C1');" width="41" height="12" />
  <img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('C5');" width="42" height="12" /></div>
  <div id="E1"></div>
  <div id="C3"><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 14px;">A</span></strong><br />
  <strong style="color: rgb(68, 68, 68);"><span style="font-size: 14px;">A</span></strong><br />
  <br />
  <font color="#9900cc"><strong><span style="font-size: 12px;">A</span></strong></font></div>
  <div id="E2"></div>
  <div id="C4"><table width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td width="100">&nbsp;</td>
<td style="font-family: Century Gothic; font-size: 11px;"
width="290">&nbsp;</td>
<td width="0">&nbsp;</td>
<td style="text-align: center;" width="380"><br />
</td>
</tr>
</table>
</div>
  <div id="E3"></div>
  <div id="C5"><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 14px;">C</span></strong></div>
 </div>
</body>
</html>

Modifié par qwertz1 (23 Nov 2010 - 20:15)
Le problème c'est tu as fait deux fonctions qui ont le même nom... il faut que tu n'aies qu'une seule fonction affiche_text(id) qui fait tout le traitement. Si t'y arrives pas je t'aiderai.
Ok merci, j'te promets que c'est pas de la flem mais je n'y arriverais pas sans qu'une personne me corrige le code. J'y ai passer toute la journée, j'ai retourné le truc dans tout les sens et j'y suis pas arrivé.
Voici la fonction en question :


function affiche_text(id) {  

	if (id == "C1"){ 
		var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>A</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>A</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>A</span></strong>"; 
		var text2 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>C</span></strong>"; 
	} 

	else{ 
		var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>B</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>B</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>B</span></strong>"; 
		var text2 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>D</span></strong>"; 
	} 
	document.getElementById("C3").innerHTML = text1; 
	document.getElementById("C5").innerHTML = text2; 
}


Si tu souhaites continuer dans cette voie, je te conseille de te documenter un peu sur javascript.

Bon courage !
Bon j'y suis presque mais je bute encore sur quelque points.

Comment faire pour que je puisse effectuer les mêmes action dans le div "C10" ainsi que dans la deuxième colonne de mon tableau (la ou il y a la lettre "C"

J'ai déjà fais une première modification mais je sais pas quoi faire par la suite.

<script language="javascript">  
function affiche_text(id) {   
 
    if (id == "C1"){  
        var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>A</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>A</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>A</span></strong>";  
        var text2 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>C</span></strong>";
		var text3 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>E</span></strong>";
		var text4 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>Y</span></strong>";  
    }  
 
    else{  
        var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>B</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>B</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 12px;'>B</span></strong>";  
        var text2 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>D</span></strong>";
		var text3 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>F</span></strong>";
		var text4 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>Z</span></strong>";  
    }  
    document.getElementById("C3").innerHTML = text1;  
    document.getElementById("???").innerHTML = text2;
	document.getElementById("C5").innerHTML = text3;
	document.getElementById("C10").innerHTML = text4;  
}  
</script>
</head>

<body>
<div id="CP">
  <div id="C1">
  <img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('C1');" width="41" height="12" />
  <img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('C5');" width="42" height="12" /></div>
  <div id="E1"></div>
  <div id="C3"><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 14px;">A</span></strong><br />
  <strong style="color: rgb(68, 68, 68);"><span style="font-size: 14px;">A</span></strong><br />
  <br />
  <font color="#9900cc"><strong><span style="font-size: 12px;">A</span></strong></font></div>
  <div id="E2"></div>
  <div id="C4"><table width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td width="100">&nbsp;</td>
<td style="font-family: Century Gothic; font-size: 11px;"
width="290">C</td>
<td width="0">&nbsp;</td>
<td style="text-align: center;" width="380"><br />
</td>
</tr>
</table>
</div>
  <div id="E3"></div>
  <div id="C5"><strong>E</strong></div>
  <div id="C10"><strong>Y</strong></div>
 </div>
</body>
</html>
Sujet clos
Aller à