Coordonnées de la souris

Bonjour,

Pour prendre en charge des évènements coté client, j'ai pour habitude d'utiliser une fonction maison, nommée AddListener, fortement inspirée de ce que l'on peut trouver aisément sur le web.

Je souhaite l'utiliser pour qu'une bulle d'aide soit affichée au passage de la souris sur certains items de la page. Aussi je procède de la façon suivante :

AddListener( 'dg_ctl12_labCodeArticle', 'mouseover', BulleAfficher );

La fonction BulleAfficher ressemblant fortement à ceci :

Code:

---

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

function BulleAfficher( evt ) { var target = evt.target || evt.srcElement; ... var x = evt ? evt.clientX : window.event.clientX; var y = evt ? evt.clientY : window.event.clientY; ... // div_bulle == balise div contenant la "bulle" // balise obtenue par un moyen que je ne détaille pas içi // x est décrémenté de div_bulle.offsetWidth de sorte que le // coin haut droit de la bulle soit positionné à proximité du curseur x -= div_bulle.offsetWidth + 8; y += 6; ... div_bulle.style.left = x + 'px'; div_bulle.style.top = y + 'px'; div_bulle.style.visibility = 'visible'; }

---

Ce qui me chagrine, dans ce code, c'est que la bulle n'est plus correctement positionnée

Si l'utilisateur réduit la fenêtre de son navigateur de sorte qu'il lui faille utiliser son "ascenseur horizontal" pour rendre visible l'item dont le survol doit provoquer l'affichage de la bulle,
Alors la bulle n'est pas positionnée correctement (le calcul pour le left est 'faux' : il n'y a pas de prise en compte du scroll)

Avez-vous une solution à ce problème ?

http://javascript.developpez.com/faq...nt#SourisCoord

Re Isidore ;)

Essai ceci:
pour IE:

Code:

---

1 2	event.x + document.body.scrollLeft event.y + document.body.scrollTop

---

peut etre aaussi besoin de document.documentElement.scrollLeft et top mais a voir suivant ou tu veux positionner

pour le reste

Code:

---

1 2	evt.pageX evt.pageY

---

Fonctionne sous FireFox 3, IE7, Opéra 9.24, Safari 3.1, le tout sous Windows XP :

Code:

---

1 2 3 4

var x = (evt ? evt.clientX : window.event.clientX) + (document.body.scrollLeft || document.documentElement.scrollLeft);   var y = (evt ? evt.clientY : window.event.clientY) + (document.body.scrollTop || document.documentElement.scrollTop);

---

De fait, je ne suis pas tout à fait certain que la FAQ réponde vraiment à la question, au moins dans toutes les situations...? :roll:

Bon ben ça marche ? C'est résolu ? :D

J'utilise ce genre de code, la position de la souris est retournée dans (PosX,PosY) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

var iev=document.all; if(!iev) var mov=document.getElementById; if(!mov&&!iev) alert("Application incompatible avec votre navigateur!");   var PosX,PosY;   //====================================================// // Supprime le "px" en fin de chaîne -> nombre //====================================================// function nbr(nombrepx){ if(nombrepx){ if(nombrepx.length>=3) if(nombrepx.substr(nombrepx.length-2,2)=="px") return (nombrepx.substr(0,nombrepx.length-2))*1; return nombrepx*1; } return 0; }   //====================================================// // Retourne la valeur du scroll //====================================================// function GetScrollX(){ if(mov) return nbr(document.body.scrollLeft); if(document.documentElement.scrollLeft) return nbr(document.documentElement.scrollLeft);else return nbr(document.body.scrollLeft); }   //====================================================// function GetScrollY(){ if(mov) return nbr(document.body.scrollTop); if(document.documentElement.scrollTop) return nbr(document.documentElement.scrollTop);else return nbr(document.body.scrollTop); }     //====================================================// // Détection des coordonnées de la souris //====================================================// function MyMousePosX(evenement){ if(mov) return nbr(evenement.clientX)+GetScrollX(); return nbr(window.event.x)+GetScrollX()-2; }   //====================================================// function MyMousePosY(evenement){ if(mov) return nbr(evenement.clientY)+GetScrollY(); return nbr(window.event.y)+GetScrollY()-2; }     //====================================================// // Souris en mouvement //====================================================// function Position(evenement){ PosX=MyMousePosX(evenement); PosY=MyMousePosY(evenement); }   //====================================================// // INITIALISATION //====================================================// document.onmousemove=Position;

---

:resolu: ???