[Javascript] il me manque quelque chose...
Résolu
superdje83
-
artragis Messages postés 481 Date d'inscription Statut Membre Dernière intervention -
artragis Messages postés 481 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- [Javascript] il me manque quelque chose...
- Telecharger javascript - Télécharger - Langages
- Flouter quelque chose sur une photo - Guide
- Manque cam module - Forum TNT / Satellite / Réception
- Javascript arrondi ✓ - Forum Javascript
- Je suis une chose que les garçons utilisent 2 fois par jour et les filles une fois dans leur vie - Forum Loisirs / Divertissements
5 réponses
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 :
et dans le body :
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.
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.
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
il fonctionne sous IE et sous firefox.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question