Clignottement lors d'un "swap" de div

**nicorama** · 02/08/2007, 12h53

Bonjour,
Losque je survole mon div, l'image s'enlève pour laisser appraitre un div contenant du texte et des liens.
Lorsque je quitte le div, l'image revient.

Pour cela j'utilise onMouseOver et onMouseOut, et ca marche bien. Le seul soucis et qu'il apparait un clignottement lorsque l'on quitte non pas le div, mais la partie qui contient le texte.

Vous pouvez tester ici, sur la vignette en haut à gauche.
http://edupassion.com/tests/ftp-file...emiere%20page/

Le code correspond à cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="vignetteEleve" onMouseover=" swapContentEleve(this);">
                    <img src="images/eleves.png" />
                </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var eleveOver=false;
 
function swapContentEleve(element)
{
    if (eleveOver ) return;
    eleveOver=true;
    var oldContent=element.innerHTML;    
    var element2=document.getElementById("survoleEleve");
    element.innerHTML=element2.innerHTML;    
}
 
function restoreEleve(){
 
    if (!eleveOver ) return;    
 
    eleveOver=false;
    /*var element2=document.getElementById("restoreEleve");*/
 
    document.getElementById('vignetteEleve').innerHTML='<img src="images/eleves.png" />';
 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="survoleEleve"  style="height:200px; width:400px; background-color:#FFEEEE ;">
    <div id="survoleEleveContent"  class="survoleEleve" onmouseout="restoreEleve();">
 
<!--        On a un premier div servant à mettre le titre Eleve. Il s'agit d'une simple image de fond avec une cellule-->
        <div class="banniereHauteVignetteGauche">&nbsp;Houla
        </div>
 
        <!--On a ensuite le div de texte-->
        <div class="texteVignette">     
              kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
              kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
              kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
              kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
              kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
              kjfkldldfsjdfskldfsfdjsjdfskdfs sdfhkdsj<br>
 
        </div>
 
 
 
    </div>
</div>

Je ne pense pas que ce soit 100% un bug de navigateur car Firefox et IE6 ont exactement le même traitement.

**E.Bzz** · 02/08/2007, 13h05

Bonjour,

Envoyé par nicorama

Je ne pense pas que ce soit 100% un bug de navigateur car Firefox et IE6 ont exactement le même traitement.

oui, c'est le fonctionnement que tu as codé

Ce n'est pas sur le texte que se pose le pb, mais aux limites du div gérant les onmouseover/onmouseout.
Peut-être qu'attribuer un "margin:0;" aux différents div concernés suffira.
Sinon, tu peux essayer de passer la gestion de ton roll-over dans le div supérieur. Il n'y aura plus de onmouseout en sortant du texte, mais uniquement en sortant du cadre rouge extérieur ...

A+

**nicorama** · 02/08/2007, 17h32

Pourtant, même en mettant sur le div le plus élevé, ca clignotte encore.

Ce qui m'a haluciné, c'est qu'en faisant des tests de position de la souris, j'ai le même problème. A savoir :
Je fais un test de souris.
Si la souris est dans le rectangle du DIV, je ne remet pas l'image.
Si c'est dans le cadre, je renvois.

Je faisais un Alert pour chacker que les coordonnées x et y était bonnes, pas de soucis. Et quand je met le alert en commentaire, ca marche pas....

Alors l'autre solution, c'est de faire pivoter des images avec un map, mais internationaliser des images, c'est pourri !

J'ai changé le margin à 0, ca change rien non plus. En quoi cela pourrait-il jouer ?

**E.Bzz** · 02/08/2007, 17h41

Envoyé par nicorama

Je faisais un Alert pour chacker que les coordonnées x et y était bonnes, pas de soucis. Et quand je met le alert en commentaire, ca marche pas....

Heu ... oui, mais alors si y a bien une instruction qui pourrit la gestion des onmouseover/onmouseout, c'est bien le alert() ...
Mieux vaudrait récupérer ça dans le innerHTML d'un div, le temps de ton debug

A+

**E.Bzz** · 02/08/2007, 17h54

Envoyé par nicorama

J'ai changé le margin à 0, ca change rien non plus. En quoi cela pourrait-il jouer ?

Pour supprimer l'espace entre 2 blocs impactés.
Peut-être dû au fait que tu n'as pas mis les 2 évènements sur le même tag (fonctionnement "classique").
Essaye avec le onmouseout au même niveau que le onmouseover ...

**nicorama** · 02/08/2007, 18h05

En fait j'ai saisi le problème.
L'évènement onMouseOut se transmet du div le plus bas vers le div appelant, sauf si je me trompe.
Autrement dit, dès que la souris sort d'un DIV en dessous, le div appelant lance la fonction on MouseOut, et ca cause l'action d'afficher l'image.
La fonction onMouseOver réagit au quart de poil et remet le text.

Solution : tester d'où vient l'event, créer soi-meme un event, ou plus simplement faire un div inférieur qui fait la taille du cadre.
Par contre cette dernière solution élimine la possibilité de faire des ul et li.

Est-ce que ma théorie est valable ? Si oui, je marque le post en résolu.

**E.Bzz** · 02/08/2007, 18h26

Envoyé par nicorama

L'évènement onMouseOut se transmet du div le plus bas vers le div appelant, sauf si je me trompe.

Plus exactement (ou en plus) : lorsque la souris survol un bloc enfant, ça déclenche le onmouseout sur le bloc parent ...

A+

**nicorama** · 02/08/2007, 19h52

J'ai trouvé une solution que me satisfait au moins temporairement :
Je fait l'appel de onMouseOut dans le div le plus bas possible. Ainsi l'événement n'est transmit à aucun autre.

Le problème est que si on met des <p> ou des <li> dans le div, l'événement est relancé. Je dois donc séparer mes lignes avec <br/> et ca marche nickel.

A long terme, j'aimerais quand même "blocker" cet événement onMouseOut...
J'ai essayé un truc genre if(element.id!="monDiv") evt=null; mais ca n'arrange rien.
Si je fais alert(element.div); j'obtient toujours monDiv, pas l'id de <p> ou <li>.

Merci pour tout anyway.