Partage
  • Partager sur Facebook
  • Partager sur Twitter

Faire apparaître une div avec onMouseOver

et la garder visible tant que la souris est sur cette div :)

    21 juillet 2010 à 10:55:18

    Bonjour!
    Voici mon problème:
    J'essaye de faire en sorte que lorsqu'on passe la souris sur un lien un div apparaisse. De ce coté la c'est réussi. Le problème c'est que tant que la souris est sur ce lien ou sur la div, je voudrais que la div reste apparente.
    Et ca je ne sais pas du tout comment faire parce que ma div s'enlève dès que je sors du lien chez moi :s

    Voici un brin de code html:

    <div id="index" onMouseOver="appear('barrederoulante', 'index')" onMouseOut="diseappear('barrederoulante', 'index')"><a href="">index A-Z</a></div>
    <span id="barrederoulante"  onMouseOver="appear('barrederoulante', 'barrederoulante')" onMouseOut="diseappear('barrederoulante', 'barrederoulante')">
    <img src="Brindilles-img/gosse.png" />
    <a href="javascript:aff()">AFF</a></div>
    


    Et le javascript:

    $gl = "";
    function        appear(elem, id)
    {
    	$msg = "appear " + id + "\n";
    	$gl = $gl + $msg;
    	document.getElementById(elem).style.visibility = "visible";
    }
    
    function		diseappear(elem, id)
    {
    	$msg = "diseappear " + id + "\n";
    	$gl = $gl + $msg;
    	document.getElementById(elem).style.visibility = "hidden";
    }
    
    function		aff()
    {
    	alert($gl);
    	$gl = "";
    }
    


    Alors j'explique un peu le code: La globale $gl sert à rien à part débuguer. J'essaye de voir ce que fait appear et dissapear et c'est assez moche au final :s
    Quand je met ma souris sur le lien INDEX A-Z et que je la sors directement sans passer par la div et qu'ensuite je clique sur AFF voici ce que j'obtiens:

    appear index
    diseappear index
    appear index
    diseappear index
    appear index
    diseappear index


    Normalement j'aurais du avoir deux lignes donc je ne comprend pas bien pourquoi j'ai autant de résultats...
    Merci d'avance si vous pouviez m'aider pour ce problème :)

    Edit: J'ai complètement zappé de préciser: Si je survol le lien et que j'oriente ma souris vers la div ensuite, la div se ferme quand je l'atteint (c'est le problème) et je reçois exactement le même contenu dans $gl que précédemment.
    • Partager sur Facebook
    • Partager sur Twitter
      21 juillet 2010 à 11:09:17

      Pour le "javascript:" http://www.siteduzero.com/tutoriel-3-1 [...] tml#ss_part_5

      Sinon c'est onmouseover et onmouseout sans majuscules.

      Et au passage les variables en js n'ont pas besoin de $...

      Ta balise span n'est pas fermée (ou alors c'est le </div> qui devrait être un </span> ), du coup quand tu passes sur le lien AFF tu redeclenches ton onmouseover

      • Partager sur Facebook
      • Partager sur Twitter
        21 juillet 2010 à 11:18:21

        Effectivement je me suis trompé en recopiant depuis le site mais j'avais bien refermé la balise span par un </span> et non un </div>.
        J'ai viré les $ et remit onmouseover et out en minuscule.
        Donc au final si je recopie correctement le code html donne ceci:

        <div id="index" onMouseOver="appear('barrederoulante', 'index')" onMouseOut="diseappear('barrederoulante', 'index')">
             <a href="">index A-Z</a>
        </div>
        <span id="barrederoulante"  onMouseOver="appear('barrederoulante', 'barrederoulante')" onMouseOut="diseappear('barrederoulante', 'barrederoulante')">
             <img src="Brindilles-img/gosse.png" />
        </span>
        <a href="javascript:aff()">AFF</a>
        

        • Partager sur Facebook
        • Partager sur Twitter

        Faire apparaître une div avec onMouseOver

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown