[Javascript] il me manque quelque chose...

Résolu/Fermé
superdje83 - 28 févr. 2010 à 17:25
artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 - 28 févr. 2010 à 19:48
Bonjour à tous,

J'ai ce petit bout de script :

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
if (document.getElementById('legende')) {document.getElementById('legende').style.display='none';}
if (d) {d.style.display='block';}
}

window.onload=montre2;
function montre2(id) {
var d2 = document.getElementById(id);
if (document.getElementById('legende2')) {document.getElementById('legende2').style.display='none';}
if (d2) {d2.style.display='block';}
}

window.onload=montre3;
function montre3(id) {
var d3 = document.getElementById(id);
if (document.getElementById('legende3')) {document.getElementById('legende3').style.display='none';}
if (d3) {d3.style.display='block';}
}//-->
</script>

<div id="secondaire">
<dd style="display:none" id="legende"> Texte </dd>
<dd style="display:none" id="legende2"> Texte2 </dd>
<dd style="display:none" id="legende3"> Texte3 </dd>
</div>
<div id="principal">
<a href="#"><img src="images/danger.png" onmouseover="javascript:montre('legende');"/></a>
<br />
<a href="#"><img src="images/danger2.png" onmouseover="javascript:montre2('legende2');" /></a>
<br />
<a href="#"><img src="images/danger3.png" onmouseover="javascript:montre3('legende3');" /></a>
</div>


Pour vous l'expliquer en quelques mots :

Quand je passe la souris sur mon image danger.png, le contenu de l'id="legende" s'affiche.
Idem pour pour danger2.png qui affiche le contenu de l'id="legende2" et danger3.png qui affiche le contenu de l'id="legende3".

Le problème est que si je passe sur les images les une après les autres, les 3 légendes restent affichées.
Je voudrais simplement une sorte de "clear", c'est à dire que si je passe sur danger2.png la légende affichée précédement d'efface et laisse place à la nouvelle légende ?
La solution pourrait être de faire un

onmouseout="javascript:montre('');

mais le problème est que la légende doit rester affichée car elle est susceptible de contenir un lien et disparaitre au survol d'une autre image.

Pensez-vous pouvoir m'aider ?

Merci

5 réponses

artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 146
28 févr. 2010 à 18:06
je ne comprends rien à ton code.
pourquoi tu fais trois fonctions?
pourquoi tu répètes deux fois la même chose?

voila ce que moi j'aurai fait :
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
var tableau_id= new array("legend", "legend1", "legend2");

if (d) {d.style.display='block';
for(var i=0;i<3;i++){
   if(tableau_id[i]!=id){document.getElementById(tableau_id[i]).style.display='none';}
}
}
function cacher(id){
 if(document.getElementById(id)){document.getElementById(id).style.display='none';}
}
//-->
</script>


et dans le body :
<div id="secondaire">
<dd style="display:none" id="legende"> Texte </dd>
<dd style="display:none" id="legende2"> Texte2 </dd>
<dd style="display:none" id="legende3"> Texte3 </dd>
</div>
<div id="principal">
<a href="#"><img src="images/danger.png" onmouseover="montre('legende')" onmouseout="cache('legend')"/></a>
<br />
<a href="#"><img src="images/danger2.png" onmouseover="montre('legende2')" onmouseout="cache('legend2')" /></a>
<br />
<a href="#"><img src="images/danger3.png" onmouseover="montre('legende3')"onmouseout="cache('legend3')" /></a>
</div> 
0
A vrai dire je suis novice en javascript...

J'ai essayé ta solution mais elle ne marche pas. Par contre j'ai vu que tu as rajouté des onmouseout mais il faut que la légende reste présente jusqu'au survol d'une autre image.

merci pour ton aide.
0
artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 146
28 févr. 2010 à 18:55
désolé, j'ai fait des erreurs d'innatention dans ma solution (oublie d'une majuscule, de "e" à legende, et d'une acolade)
voici le code que j'ai testé chez moi
<html>

	<head>
		<script type="text/javascript">

function montre(id) {
	var d = document.getElementById(id);
	var tableau_id=new Array('legende','legende2','legende3');

	if (d) {d.style.display='block';}
	for(var i=0;i<3;i++){
   		if(tableau_id[i]!=id){
			d=document.getElementById(tableau_id[i]);
			d.style.display='none';
		}
		
	}
}


	</script>
	</head>
<body>
<div id="secondaire">
<dd style="display:none" id="legende"> Texte </dd>
<dd style="display:none" id="legende2"> Texte2 </dd>
<dd style="display:none" id="legende3"> Texte3 </dd>
</div>
<div id="principal">
<a href="#"><img src="images/danger.png" onmouseover="montre('legende')"/></a>
<br />
<a href="#"><img src="images/danger2.png" onmouseover="montre('legende2')" /></a>
<br />
<a href="#"><img src="images/danger3.png" onmouseover="montre('legende3')"/></a>
</div> 
</html>

il fonctionne sous IE et sous firefox.
0
Merci beaucoup !! c'est nikel.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
artragis Messages postés 481 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 6 avril 2010 146
28 févr. 2010 à 19:48
n'hésite pas à mettre le sujet en résolu et à cliquer sur le "+" de mon dernier message pour que si une autre personne a le même problème elle trouve réponse à sa question.
0