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

**microbulles** · 06/07/2007, 19h12

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....

Merci

**sacroyant** · 07/07/2007, 11h04

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

Demo :

http://sacroyant.uni.cc/Examples/oldest/cursoronpic.htm

**microbulles** · 07/07/2007, 14h28

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

En plus ça marche sous IE et sous Firefoxe

un grand grand merci !!

**Pill_S** · 22/11/2007, 09h59

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 ?

**E.Bzz** · 22/11/2007, 10h49

Bonjour Pill_S,

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+

**Pill_S** · 22/11/2007, 11h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**E.Bzz** · 22/11/2007, 11h09

Je pense que c'est le offsetParent retourné au final qui pose problème.
Ca donne quoi en modifiant comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Pill_S** · 22/11/2007, 11h14

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?

**E.Bzz** · 22/11/2007, 11h20

Effectivement, il y a dèjà le décalage avec le script d'origine de cette discussion.

Envoyé par Pill_S

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**SpaceFrog** · 22/11/2007, 11h32

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 ...

**Pill_S** · 22/11/2007, 11h46

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"

**E.Bzz** · 22/11/2007, 11h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**SpaceFrog** · 22/11/2007, 12h10

bodyElement ?

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

JavaScript

Discussions similaires

Partager

Partager