IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Clignottement lors d'un "swap" de div


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé

    Homme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    766
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 766
    Par défaut Clignottement lors d'un "swap" de div
    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.

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Citation 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+

  3. #3
    Membre éclairé

    Homme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    766
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 766
    Par défaut
    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 ?

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation 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+

  5. #5
    Membre éclairé

    Homme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    766
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 766
    Par défaut
    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.

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation 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+

  7. #7
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation 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 ...

+ Répondre à la discussion
Cette discussion est résolue.

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo