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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager