Remplacer le contenu d'un div lors d'un clic

danidina Messages postés 16 Date d'inscription   Statut Membre Dernière intervention   -  
coeus Messages postés 3021 Date d'inscription   Statut Membre Dernière intervention   -
Salut à tous,

j'ai un 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

Savez-vous d'où cela peux venir?

Code:

<!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;'>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("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"> </td>
<td style="font-family: Century Gothic; font-size: 11px;"
width="290"> </td>
<td width="0"> </td>
<td style="text-align: center;" width="380"><br />
</td>
</tr>
</table>
</div>
<div id="E3"></div>
<div id="C5"><strong>A</strong></div>
</div>
</body>
</html>
A voir également:

3 réponses

Réponse 1 / 3
coeus Messages postés 3021 Date d'inscription   Statut Membre Dernière intervention   119
 
Bonjour !

Est-ce que c'est moi ou ta fonction affiche_text() est définie deux fois ?
Deux fonctions ne peuvent pas avoir le même nom...
Change le nom d'une des deux fonctions et adapte ton onclick.

Aussi, petit conseil en passant : tu devrais vraiment enlever les styles définis à l'intérieur des balises HTML (genre <span style="blah">) et mettre des classes à la place. Ce serait beaucoup plus lisible. Mais tu en avais peut-être déjà l'intention...
0
Réponse 2 / 3
danidina Messages postés 16 Date d'inscription   Statut Membre Dernière intervention   1
 
Merci pour tes info.

Mais sans vouloir abuser de ta gentillesse, tu pourrais pas me récrire correctement ce code, car j'suis débutant, j'y ai passer toute la journée et la ça devient du chinois pour moi.
0
Réponse 3 / 3
coeus Messages postés 3021 Date d'inscription   Statut Membre Dernière intervention   119
  
<!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;
			}
			#C1 img {
				cursor:pointer;
				}

		#E1 {
			height: 30px;
			width: 780px;
			clear: both;
			}

		#C3 {
			text-align: center;
			width: 780px;
			font-family: "Lucida Grande";
			line-height: 16px;
			}
			#C3 p {
				color:#444;
				font-size:14px;
				font-weight:bold;
				}
				#C3 p.special {
					color:#90C;
					font-size:12px;
					}

		#E2 {
			height: 40px;
			width: 780px;
			}

		#C4 {
			width: 780px;
			}
			#C4 table {
				font-family:"Century Gothic";
				font-size:11px;
				width:780px;
				}
				#C4 table td.small	{ width:100px; }
				#C4 table td.medium { width:290px; }
				#C4 table td.big	{
					text-align:center;
					width:380px;
					}

		#E3 {
			height: 40px;
			width: 780px;
			clear: both;
			}

		#C5 {
			text-align: justify;
			width: 780px;
			font-family: "Century Gothic";
			font-size: 11px;
			}
			#C5 p { font-weight:bold; }

	</style>


	<script language="javascript">
		function remplace(image) {
			document.getElementById("C8").innerHTML = "<img src='"+image+"'>";
		}

		function affiche_text(id) {
			switch (id) {
				case "C1" : text = text = "A"; break;
				case "C5" : text = text = "B"; break;
			}

			var c3 = document.getElementById("C3").getElementsByTagName("p");
			for (x in c3) { c3[x].innerHTML = text; }

			var c5 = document.getElementById("C5").getElementsByTagName("p");
			for (x in c5) { c5[x].innerHTML = text; }
		}
	</script>
</head>

<body>
	<div id="CP">
		<div id="C1">
			<img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('C1');" />
			<img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('C5');" />
		</div>
		<div id="E1">&#160;</div>
		<div id="C3">
			<p>A</p>
			<p>A</p>
			<p class="special">A</p>
		</div>
		<div id="E2">&#160;</div>
		<div id="C4">
			<table>
				<tr>
					<td class="small">&#160;</td>
					<td class="medium">&#160;</td>
					<td class="small">&#160;</td>
					<td class="big">&#160;</td>
				</tr>
			</table>
		</div>
		<div id="E3">&#160;</div>
		<div id="C5">
			<p>A</p>
		</div>
	</div>
</body>

</html>
0
coeus Messages postés 3021 Date d'inscription   Statut Membre Dernière intervention   119
 
J'ignore si l'apparence sera ex-ac-te-ment identique, mais tu peux retravailler.
Là ne va pas croire que ça t'évite de faire ton effort, au contraire, tu m'en dois une pour ce service rendu, et ce que je demande en échange c'est que tu fasses tes recherches pour au moins être en mesure de comprendre ce que j'ai fait :P

Ne te décourage pas, je suis resté dans le basique, tu pourras trouver facilement. ;-)

Bonne chance !
0

Discussions similaires

Contenue masqué
Hippolyte -
Hippolyte -

6 réponses
ca veut dire quoi wmg sur youtube ?
parissf -
cacadoigt -

27 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Facebook - "Désolé, ce contenu n’est pas disponible..." et autre probl
coc-6 -
coc-6 -

14 réponses