[Résolu]Un <DIV> qui ne veut plus disparaître!

Bonjour, j'essaye... je dis bien j'essaye de faire un div genre popup.

Ça fonctionne nikel à part que mon div ne veut plus disparaître sur le onmouse out
Voici mon fichier .js

function viewpopup()
{
     mouse_x = 0;
     mouse_y = 0;

     document.onmousemove = position;
}
function killpopup()
{
    document.getElementById("divPopup").style.visibility = "hidden";
}

 function position(evt){

 if(!evt) evt = window.event;

 mouse_x = evt.clientX;

 mouse_y = evt.clientY;
 
 document.getElementById("divPopup").style.visibility = "visible";
 document.getElementById("divPopup").style.marginLeft = mouse_x + "px";
 document.getElementById("divPopup").style.marginTop = (mouse_y - 100) + "px";

 }

voici mon html:

<div style="visibility: hidden; position:absolute; margin-top:100px; margin-left: 100px;" id="divPopup">
    <table style="border:solid 1px black; background-color:Blue; margin-left: 0px">
        <tr>
            <td id="tdPopupValue">
                ici:
                <span id="coordonnees"></span>
            </td>
        </tr>
    </table>
</div>
<a href="#" onmouseover="viewpopup()" onmouseout="killpopup()">Test</a>

Est-ce qu'il y a quelqu'un qui saurait me dire ce que je dois dire à ce fichu <div> pour qu'il m'écoute
Modifié par poussy-puce (03 May 2007 - 15:48)

C'est normal qu'il ne disparaisse pas et tu vas vite comprendre pourquoi.

Quand tu appelles viewpopup(), tu attaches une fonction à un évènement (onmousemove). Cela revient à dire que dès que la souris bouge, tu appelles la fonction position(). Et regarde ce que tu as dans cette même fonction :

 document.getElementById("divPopup").style.visibility = "visible";

killpopup() n'est appelée qu'une fois, au sortir du lien.
position() est appelé en permanence.

Autant dire que killpopup() n'aura qu'un effet imperceptible par l'utilisateur. En clair, ta fonction killpopup devrait :
- désenregistrer l'évènement onmousemove
- masquer le popup

PS : même remarque qu'à une autre personne des forums, évite le nommage (de fonctions, de classes, d'ID ou autre) en fonction de la nature (div, span, p etc.) car au moindre changement ça t'oblige à renommer tes fonctions pour rester cohérentes.
Au lieu de divPopup, popup_souris aurait été plus adapté à mon sens : ça te dit à quoi c'est lié, c'est indépendant du code HTML bref ça ne risque pas de changer sauf si tu souhaites assigner le popup à autre chose que la souris.

Salut,
Tu peux mettre onmousemove à la place de onmouseover et enlever la ligne qui assigne la foncition position comme gestionnaire de l'évènement onmousemove.
A+.
http://www.t-servi.com

Edit :
Tu peux utiliser cette fonction :

<script>
gk=window.Event?1:0; //détection de gecko

function visibility_div(name, status, e)
{
  //self.alert(gk+'/'+e.x+':'+e.y+'/'+e.pageX+':'+e.pageY);
  var my_x=0;
  var my_y=0;
  if(gk==0)
      {my_x=e.x+document.body.scrollLeft;my_y=e.y+document.body.scrollTop;}
  else
      {my_x=e.pageX;my_y=e.pageY;}
  //self.alert(my_x+':'+my_y);
  my_div=self.document.getElementById(name);
  my_div.style.top=(my_y-60)+'px';
  my_div.style.left=(my_x-310)+'px';
  my_div.style.visibility=status;  
}
</script>

Que tu appeles de cette façon :

<a href="#" onmousemove="visibility_div('divPopup','visible',event)" onmouseout="visibility_div('divPopup','hidden',event)">Test</a>

Modifié par tservi (03 May 2007 - 11:18)

The Jedi a écrit :

Quand tu appelles viewpopup(), tu attaches une fonction à un évènement (onmousemove). Cela revient à dire que dès que la souris bouge, tu appelles la fonction position(). Et regarde ce que tu as dans cette même fonction :

 document.getElementById("divPopup").style.visibility = "visible";

Un GROS merci pour ton aide The Jedi... j'ai bien compris mon erreur et avec ton explication "J'ai vite compris pourquoi"

J'ai juste faite une petite modif et ça fonctionne nikel!!!

function viewpopup()

{

     mouse_x = 0;

     mouse_y = 0;



     document.getElementById("divPopup").style.visibility = "visible";
     document.onmousemove = position;

}

function killpopup()

{

    document.getElementById("divPopup").style.visibility = "hidden";

}



 function position(evt){



 if(!evt) evt = window.event;



 mouse_x = evt.clientX;



 mouse_y = evt.clientY;

 


 document.getElementById("divPopup").style.marginLeft = mouse_x + "px";

 document.getElementById("divPopup").style.marginTop = (mouse_y - 100) + "px";



 }

Encore merci pour ton aide!!!