coordonnées de souris

Bonjour!

J'ai un problème avec un code permettant d'afficher un petit popup au survol d'un lien. Ce popup est un div caché ou non.
Mais celui ci ne s'affiche pas correctement (il est à la bonne place au niveau des abscisses, mais son comportement au niveau des ordonnées est complètement chaotique: des fois bien trop haut, des fois trop bas...)

Code html :

Code:

---

1 2	<a href="blabla.php" onmouseover='previsu(param1,param2,event)'>blabla</a> <div id="popup"></div>

---

code CSS de mon DIV qui sert de popup

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#popup { position:absolute; top: 5px; left:5px; width: 250px; height: 170px; font: .8em Arial, sans-serif; padding: 5px; visibility: hidden; border: 1px black solid; clip: auto; overflow: hidden; }

---

Code javascript (simplifié)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function previsu(param1,param2,event) { if(!event) event = window.event;   xpos = event.clientX; ypos = event.clientY;   //bla bla bla.... var previsu = document.getElementById("popup"); previsu.innerHTML = xhr.responseText; previsu.style.top = ypos + 10 + "px"; previsu.style.left = xpos + 10 + "px"; previsu.style.visibility = "visible";   }

---

Merci d'avance!

ta div ne serait pas elle même dans un autre élément positionné en absolute ou relative ?

Merci de ta réponse le_chomeur.
Oui ma div est bien positionnée dans une autre div positionnée en relative.

:-) donc il faut que tu prennes en compte cela,
la position de ta div, sera donc considéré dans son conteneur et non pas par rapport a la souris, explication :

div contenante ( relative ) :
200 /200 positionné a 300px du bord gauche

div contenu (absolute):

40/40 positionnée a 100 du bord gauche = 100+ position parent ( pour autant de parent qu'il y aura ) = 400px du bord gauche.

pour calculer cela il faut calculer la position des parents :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function getPosition (element) { var tmpLeft = element.offsetLeft; var tmpTop = element.offsetTop; var MyParent = element.offsetParent; while(MyParent) { tmpLeft += MyParent.offsetLeft; tmpTop += MyParent.offsetTop; MyParent = MyParent.offsetParent; } alert(tmpLeft + "px"); alert(tmpTop +"px"); }

---

tu peux t'inspiré de ça :)

Merci beaucoup, je vais regarder ça! ;)

Bon récupérer l'ordonnée du conteneur parent, ça marche bien.
Si j'applique ceci au code d'avant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function getPositionY (element) { var tmpTop = element.offsetTop; var MyParent = element.offsetParent; while(MyParent) { tmpTop += MyParent.offsetTop; MyParent = MyParent.offsetParent; } return tmpTop; //alert(tmpLeft + "px"); //alert(tmpTop +"px"); }   ... previsu.style.top = getPositionY(contenu)+"px"; ...

---

Le popup s'affiche bien en haut du conteneur parent (donc pas vers la souris, logique, c'était pour tester).

Mais dès que je rajoute :

Code:

---

previsu.style.top = getPositionY(contenu)+ypos+"px";

---

Le popup réagit encore nimporte comment!
J'ai donc l'impression que ça vient du event.clientY...

Au pire, tu peux regarder dans la FAQ :roll:

pour positionner ta div a l'intérieur de l'autre tu doit faire :

var offsetX = (event.clientX - positiondivcontenante.left);
var offsetY = (event.clientY - positiondivcontenante.top);

ou left et top , sont calculer grâce a la méthode donnée plus haut :)

Ca marche nickel en faisant :

Code:

---

1 2 3

var monBody = document.documentElement || document.body; previsu.style.top = ypos+monBody.scrollTop+"px";

---

J'avais regardé la FAQ mais j'avais pas fait attention à ce scrollTop.
Merci à vous deux.