[Javascript] il me manque quelque chose... [Résolu/Fermé]

Signaler
-
Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
-
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

Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
141
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> 
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.
Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
141
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.
Merci beaucoup !! c'est nikel.
Messages postés
481
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 avril 2010
141
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.