Récupérer la postion de la souris sur une image

Version imprimable

06/07/2007, 19h12
microbulles

Récupérer la postion de la souris sur une image

Bonjour,

Je souhaite récupérer la position de la souris sur une image. (coin haut gauche de l'image devant représenter les coordonnées 0,0.

pour l'instant j'ai trouvé ça :
function register_position(){
mouse_x = 0;
mouse_y = 0;
document.onmousemove = position;
}
function position(evt){
if(!evt) evt = window.event;
mouse_x = evt.clientX;
mouse_y = evt.clientY;
document.getElementById("X").innerHTML = "X : "+mouse_x+" ; Y : "+mouse_y;
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.mousemove);
document.onclick = GetCoordonnee;

Au niveau du html j'ai rajouté :

<body onLoad="register_position()">
....
<p id="X"> </p>
<p id="X"> </p>
....

Ce qui me permet de récupérer les coordonnées de la souris dans le browser (IE ou Firefox) mais comment faire pour avoir les coordonnées dans l'image ???
pour l'instant je n'ai pas trouvé. (ou pas compris ce que j'ai pu lire à ce sujet).

Si qqu'un à déjà réalisé un bout de script s'approchant de se que je veux faire....:king:

Merci
07/07/2007, 11h04
sacroyant

Je pense que je pourrais t'aider. Parse que nous avons eu les coordonnées de la souris dans le browser (X, Y). Voilà tout ce que tu dois faire : utiliser deux properties offsetTop and offsetLeft pour récupérer l'espacement du sommet et de la marge gauche, à ton image (iTop, iLeft);

Alors, les coordonnées de la souris sur une image, ce sont les valeurs X-iTop et Y-iLeft :yaisse2:

Demo :

http://sacroyant.uni.cc/Examples/oldest/cursoronpic.htm
07/07/2007, 14h28
microbulles

C'est simple c'est exactement ce que je cherchais :king:

En plus ça marche sous IE et sous Firefoxe :king:

un grand grand merci !!
22/11/2007, 09h59
Pill_S

Bonjour,

je me permet de ressortir ce vieux topic. J'ai exactement les mêmes besoins, sauf que mon image est au milieu d'une multitude de div imbriquées... Et les valeurs renvoyées par ce code sont complètement fausses (IE et Firefox)....

Est-ce que quelqu'un connait un bon moyen de faire cela ?
22/11/2007, 10h49
E.Bzz

Bonjour Pill_S,

Citation:

Envoyé par Pill_S

J'ai exactement les mêmes besoins, sauf que mon image est au milieu d'une multitude de div imbriquées... Et les valeurs renvoyées par ce code sont complètement fausses (IE et Firefox)....

dans ce code les coordonnées sont calculées par rapport à la fenêtre. Les div conteneurs ne devraient pas "tout casser".
Par contre, il peut y avoir de légères différences entre IE et Firefox (ex : dans le lien donné, sous IE 6 les pixels commencent à 3X3 alors que sous FF c'est bien 1X1). Qu'entends-tu, toi, par "complétement fausses" ?
Est-ce la même erreur avec tous les nav ?
Quelles valeurs récupères-tu au lieu de quelles valeurs attendues ?
Peut-on voir ta version du code ?

A+

Citation:

Envoyé par E.Bzz

Bonjour Pill_S,
dans ce code les coordonnées sont calculées par rapport à la fenêtre. Les div conteneurs ne devraient pas "tout casser".
Par contre, il peut y avoir de légères différences entre IE et Firefox (ex : dans le lien donné, sous IE 6 les pixels commencent à 3X3 alors que sous FF c'est bien 1X1). Qu'entends-tu, toi, par "complétement fausses" ?
Est-ce la même erreur avec tous les nav ?
Quelles valeurs récupères-tu au lieu de quelles valeurs attendues ?
Peut-on voir ta version du code ?

A+

Complètement fausse, càd que après calcul, je récupère des valeurs négatives pour la position de mon clic (genre X=100, Y=-300)... et encore, c'est aléatoire, des fois après quelques refresh les bonnes valeurs retombent...

FF et IE6 réagissent comme ça. Mon code vient de la FAQ (ici)
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 function computeOffsetLeft(r) { return computeOffset(r, "offsetLeft"); } function computeOffsetTop(r) { return computeOffset(r, "offsetTop"); } function computeOffset(element, attr) { var offset = 0; while (element) { offset += element[attr]; element = element.offsetParent; } return offset; } function fillTextFieldWithMousePos(xxx, imgid, fieldX, fieldY) { if (navigator.appName == "Netscape") { document.captureEvents(Event.CLICK); } if (!xxx) { xxx = window.event; } //var src = (typeof xxx.target != "undefined")?xxx.target:xxx.srcElement; var src = document.getElementById(imgid); document.getElementById(fieldX).value = xxx.clientX - computeOffsetLeft(src); document.getElementById(fieldY).value = xxx.clientY - computeOffsetTop(src); }
PS: après plusieurs tests, il semblerait que la position de la scrollbar verticale influence les résultats...

Une idée?

Merci pour ton aide ;)

22/11/2007, 11h09
E.Bzz
Je pense que c'est le offsetParent retourné au final qui pose problème.
Ca donne quoi en modifiant comme ça :
Code:

1 2 3 4 5 6 7 function computeOffsetLeft(r) { return r.offsetLeft; } function computeOffsetTop(r) { return r.offsetTop; }
Ici on renvoie directement le décalage de l'image par rapport aux bords de la page, et non l'addition des décalages des parents en remontant l'arborescence de la structure de la page ...

A+
22/11/2007, 11h14
Pill_S

Alors là ça marcherait presque avec FF, mais renvoie des valeurs encore plus farfelues sous IE...

Et je confirme que la position de la scrollbar verticale (celle du navigateur) a une influence sur les valeurs calculées....

C'est possible de récupérer la position en pixel des scrollbars?
22/11/2007, 11h20
E.Bzz
Effectivement, il y a dèjà le décalage avec le script d'origine de cette discussion.

Citation:

Envoyé par Pill_S

C'est possible de récupérer la position en pixel des scrollbars?
Code:

1 2 3 4 5 6 7 function computeOffsetLeft(r) { return r.offsetLeft+document.body.scrollLeft; } function computeOffsetTop(r) { return r.offsetTop+document.body.scrollTop; }
La compatibilité, par contre est à vérifier ...

A+
22/11/2007, 11h32
SpaceFrog

Si c'est pour exploiter les coordonnées coté client, il faut en effet passer par l'incrément du offsetTop
si c'est pour utiliser les coordonnées coté php il n'y a pas besoin de tout ça ...
les coordonnées du'un click sur une image sont automatiquement envoyées avec les données du form ...
22/11/2007, 11h46
Pill_S

Les données seront exploitées côté client ;)

En fait, je rempli un formulaire avec les coordonnées du clic (l'utilisateur peut définir des zones dans l'image cliquée).

Par contre, pour récupérer la position des scrollbar, le code ci-dessus me renvoie toujours 0 (IE et FF)...

[EDIT]
'a marche mieux avec "document.documentElement.scrollTop" ;)

Citation:

Envoyé par Pill_S

Par contre, pour récupérer la position des scrollbar, le code ci-dessus me renvoie toujours 0 (IE et FF)...

Ah bon ?
Pourtant je m'en sers dans une appli (qui ne tourne que sous IE) pour afficher une info-bulle onmouseover, et il gère bien le scroll ... :?
Pour info, la version que j'utilise
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var nava = (document.getElementById && !document.all); var iex = (document.all); if (nava) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; ... function get_mouse(e) { var x = (nava) ? e.pageX : event.x+document.body.scrollLeft; var y = (nava) ? e.pageY : event.y+document.body.scrollTop; if (x<screen.width-50){ document.getElementById('divinfo').style.left = x - 20; document.getElementById('divinfo').style.top = y + 30;} }
Peut être le problème de compatibilité préssenti ...

A+

22/11/2007, 12h10
SpaceFrog

bodyElement ?