Fonctionnement bizzare avec onMouseOver et onMouseOut

Bonjour,

voila mon script fait un zoom de l'image au survol de la souris sur la vignette. Mais j'ai un souci car quand je survol les vignettes elles s'agrandissent bien lorsque je ne survol plus les images, selon ou je place le curseur dans la page elles restent agrandies et ne se ferme pas pour redevenir en vignettes, il faut que je les survole de nouveau pour que les vignettes s'affichent.

Voici mon script :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<script type="text/javascript">   function charge_d(binid){   // alert('charged: ' + binid);   document.getElementById('resus_'+binid).style.display='block';   document.getElementById('resus_'+binid).style.display='none';   document.getElementById('resusig_d'+binid).style.display='block';   document.getElementById('resusig_g'+binid).style.display='block';       }       function decharge_d(binid){   //alert('decharged: ' + binid);   document.getElementById('resusig_d'+binid).style.display='none';   document.getElementById('resusig_g'+binid).style.display='none';   document.getElementById('resus_'+binid).style.display='block';   }   </script>

---

et mes liens :

Dans un div la vignette

Code:

---

echo "<img src='/i/p_d_". $bie['r_dp'].".jpg' onMouseOver='charge_d(". $bie['id'] .")' />";

---

dans un autre div la grande image :

Code:

---

echo "<img src='/i/g_d_". $bie['r_dp'] . ".jpg' onMouseOut='decharge_d(". $bie['id'] .")'/>";

---

Merci de votre aide

Citation:

---

Envoyé par pcsystemd

Bonjour,

Dans un div la vignette

Code:

---

echo "<img src='/i/p_d_". $bie['r_dp'].".jpg' onMouseOver='charge_d(". $bie['id'] .")' />";

---

dans un autre div la grande image :

Code:

---

echo "<img src='/i/g_d_". $bie['r_dp'] . ".jpg' onMouseOut='decharge_d(". $bie['id'] .")'/>";

---

Merci de votre aide

---

la même avec le code généré et non le code php et on peut commencer a t'aider ;)

Voici le code généré :

Les liens.

pour la vignette :

Code:

---

<img src='/i/p_dp_1.jpg' onMouseOver='charge_d(198092)' />

---

Pour l'image agrandie :

Code:

---

<img src='/i/g_dp_1.jpg' onMouseOut='decharge_d(198092)'/>

---

Merci

heu okip , en l'état il manque des infos , les block avec ces id ???

de plus je pense qu'il y a possibilité d'optimisé :)

donne nous la portion de code complet :)

Voici :

Pour les vignettes :

Code:

---

1 2	<div class="contr" style="float:right;"> <img src='/i/p_dp_1.jpg' onMouseOver='charge_d(198092)' />&nbsp;<img src='/i/p_g_2.jpg' onMouseOver='charge_d(198092)'/></div>

---

Pour les grandes images

Code:

---

1 2 3 4 5

<div class="resus" id="resusig_dp198092" style="display:none"> <img src='/i/g_dp_1.jpg' onMouseOut='decharge_d(198092)'/></div>   <div class="resus" id="resusig_g198092" style="display:none"> <img src='/i/g_g_2.jpg' onMouseOut='decharge_d(198092)'/></div>

---

Ok :)

alors 2 solutions :
- première stocker toute tes id d'image dans un tableau js , ce qui te permettra de boucler sur le tableau pour tout masquer puis afficher uniquement l'élément voulut
- mettre toute tes images dans une div unique, avec un id , et tu affecte l'id sur l'image et non pas sur la div , puis tu récupères tous les id dans un tableau de manière non intrusive :


var listImg = document.getElementById('mesimages').getElementsByTagName('img');

<div id="mesimages">
</div>

il te restera a faire la méthode pour boucler et masquer toute les images avant d'afficher celle voulut

Ok ;) Merci pour l'info je vois.

Une petite question si j'ai bien compris le fonctionnement du OnMouseOver et OnMouseOut, lorsque l'image est agrandie, il suffit de retirer le curseur de l'image pour que la vignette s'affiche non? car pour moi lorsque l'image est agrandie, il faut que je repasse le curseur dessus pour que la vignette s'affiche de nouveau!!

effectivement =>
onmouseover ( tu es dessus ) => on agrandit
onmouseout ( tu es sort) => on masque / diminue