Coordonnées de la souris par rapport à un élément

Version imprimable

Bonjour à tous,

Est ce que quelqu'un sait pourquoi ces fonctions destinées à afficher les coords souris par rapport à un élèment (nommé "layer_transp1") ne fonctionnent pas sous Firefox 1.5, alors que c'est nickel sous IE ?

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
 
function twInit() {
var oImage = document.getElementById("layer_transp1")
if (oImage) {
oImage.onmousedown = twPositionRelativeFixe
}
}
 
function twPositionRelativeFixe(evt) {
var nOffsetX;
var nOffsetY;
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
if (document.all) {
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
} 
else if (document.getElementById) {
nOffsetX = (evt.clientX - document.getElementById("layer_transp1").offsetLeft);
nOffsetY = (evt.clientY - document.getElementById("layer_transp1").offsetTop);
}
}
document.getElementById("X1").innerText = nOffsetX;
document.getElementById("Y1").innerText = nOffsetY;
}

Merci de votre aide.

06/09/2006, 20h22
Auteur

bonjour,

utilise innerHTML au lieu d'innerText
07/09/2006, 10h41
renaud26

Bonjour et merci de ta réponse, mais j'ai essayé...et cela ne fonctionne pas plus avec Firefox... L'ennuyeux c'est que la console JS n'indique pas d'erreur...
Par contre, avec IE et innerHTML, j'ai une erreur: "erreur d'application inconnue"...

je crois que selon les navigateurs il ne faut pas utiliser les memes choses pour recuperer la position de la souris. voici ce que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function getPositionCurseur(e){ //ie if(document.all){ curX = event.clientX; curY = event.clientY; } //netscape 4 if(document.layers){ curX = e.pageX; curY = e.pageY; } //mozilla if(document.getElementById){ curX = e.clientX; curY = e.clientY; } }

07/09/2006, 12h12
renaud26

merci de ta réponse, mais avec ça j'obtiens les coordonnées par rapport à la page...et je ne sais pas comment, maintenant, les obtenir par rapport à mon élément "layer_transp1"...
07/09/2006, 14h18
Auteur

Citation:

Envoyé par renaud26

Bonjour et merci de ta réponse, mais j'ai essayé...et cela ne fonctionne pas plus avec Firefox... L'ennuyeux c'est que la console JS n'indique pas d'erreur...
Par contre, avec IE et innerHTML, j'ai une erreur: "erreur d'application inconnue"...

là je suis surpris 8O avec IE5 et FF innerHTML passe comme une lettre à la poste.

Avec FF, j'ai un avertissement au niveau du test document.all, mais c'est tout.
Juste un détail à ce propos : je ne suis pas sûr que ce test if(document.all) soit nécessaire car IE reconnaît document.getElementById().

Mais non, innerHTML ne passe pas du tout comme une lettre à la poste ! FF n'affiche rien et IE une erreur. Obligé de passer par innerText.
Par contre, si je fais:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function twPositionRelativeFixe(evt) { var nOffsetX; var nOffsetY; evt = (evt) ? evt : ((window.event) ? window.event : ""); if (evt) { if (document.getElementById) { nOffsetX = (evt.clientX - document.getElementById("layer_transp1").offsetLeft); nOffsetY = (evt.clientY - document.getElementById("layer_transp1").offsetTop); } } document.getElementById("X1").innerText = nOffsetX; document.getElementById("Y1").innerText = nOffsetY; }
en modifiant le script d'origine
Code:

1 2 3 4 5 6 7 8 9 if (document.all) { nOffsetX = evt.offsetX; nOffsetY = evt.offsetY; } else if (document.getElementById) { nOffsetX = evt.pageX - document.getElementById("layer_transp2").offsetLeft; nOffsetY = evt.pageY - document.getElementById("layer_transp2").offsetTop; }
je n'ai toujours que dalle dans FF mais IE m'affiche les coords souris par rapport à la page et non par rapport à l'élément "layer_transp1"...
Comprends plus rien...:oops:

bon on va essayer autrement :
Fais un copier-coller et teste ce code :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#layer_transp1{
background-color: #AAAAAA;
position: absolute;
top: 100px;
left: 150px;
width: 200px;
cursor: default;
border: none;
padding: 10px;
}
 
.couleur{color: #0000FF;}
//-->
</style>
 
<script type="text/javascript">
<!--
function twPositionRelativeFixe(evt) 
{
 var nOffsetX;
 var nOffsetY;
 var divTest = document.getElementById("layer_transp1");
 
 evt = (evt) ? evt : ((window.event) ? window.event : "");
 
 if (evt)
 {
    nOffsetX = evt.clientX + document.body.scrollLeft - divTest.offsetLeft;
    nOffsetY = evt.clientY + document.body.scrollTop - divTest.offsetTop;
 
    document.getElementById("X1").innerHTML = "relatif X: <span class='couleur'>"+nOffsetX+"</span> ; absolue X: <span class='couleur'>"+evt.clientX+"</span>";
    document.getElementById("Y1").innerHTML = "relatif Y: <span class='couleur'>"+nOffsetY+"</span> ; absolue Y: <span class='couleur'>"+evt.clientY+"</span>";
 }
}
 
//-->
</script>
 
</head>
 
<body>
Coordonn&eacute;es&nbsp;:
<div id="X1"></div>
<div id="Y1"></div>
 
<div id="layer_transp1" onclick="twPositionRelativeFixe(event)">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
 
</body>
 
</html>

Normalement, lors de chaque clic dans le paragraphe, les coordonnées relatives et absolues s'affichent.
Je l'ai testé avec IE et Firefox sans aucun problème.

j''ai ajouté une feuille de style pour le div ;
Je tiens compte d'éventuels scroll du body : body.scrollTop et body.scrollLeft ;
Sous IE la largeur du paragraphe fait 200px, sous Firefox il fait 220 px à cause des padding à gauche et à droite (2x10px).

Maintenant si

Code:

1
2
3
 
    document.getElementById("X1").innerHTML = "relatif X: <span class='couleur'>"+nOffsetX+"</span> ; absolue X: <span class='couleur'>"+evt.clientX+"</span>";
    document.getElementById("Y1").innerHTML = "relatif Y: <span class='couleur'>"+nOffsetY+"</span> ; absolue Y: <span class='couleur'>"+evt.clientY+"</span>";

te gêne remplace le par un alert().

:question:y-at-il un lien entre ce sujet et celui-là ?

07/09/2006, 19h16
renaud26

Waow ! bravo ! effectivement, ton test fonctionne sur les 2 navigs... Maintenant me reste à adapter ça à ma page. Je m'y mets et je reviens te dire comment ça fonctionne...;)
07/09/2006, 20h15
Auteur

heureusement, je commençais à me poser des questions.

Je pense que tu as dû oublier de préciser certains paramètres de ton div.
08/09/2006, 08h56
renaud26

Bonjour, je crois aussi que mon code est devenu trop compliqué...parce que je ne parviens pas à adapter ton exemple...innerHTML plante, j'obtiens toujours des coordonnées absolues si je mets innerText...bref c'est pas gagné...parce qu'en fait, comme ma page est construite, je suis quasi obligé d'apeller twPositionRelativeFixe(evt) par twInit(), elle même chargée via onMouseOver sur l'image qui se trouve "sous" le "layer_transp"...ou la la :aie:

Bon, j'ai repris calmement les choses...et pu simplifier à l'extrême la fonction...
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 function twPositionRelativeFixe(evt) { var nOffsetX; var nOffsetY; evt = (evt) ? evt : ((window.event) ? window.event : ""); if (document.all) { nOffsetX = evt.offsetX; nOffsetY = evt.offsetY; alert("IE: "+nOffsetX+""); } else { alert("Firefox"); nOffsetX = evt.clientX; nOffsetY = evt.clientY; } document.getElementById("X1").innerText = nOffsetX; document.getElementById("Y1").innerText = nOffsetY; } function twInit() { var oImage = document.getElementById("layer_transp1") if (oImage) { oImage.onmousedown = twPositionRelativeFixe } }
là, je vois bien que twInit() transmet bien "layer_transp1" comme étant evt, et que twPositionRelativeFixe(evt) me donne directement les bonnes coordonnées relatives simplement avec evt.offsetX...Les alert sont OK...même celle de FF qui, apparemment, ne comprend pas document.all. Par contre il ne m'affiche que dalle et je comprends pas ce qui le gêne. J'ai également essayé innerHTML...

08/09/2006, 10h52
Auteur
Citation:

ref c'est pas gagné...parce qu'en fait, comme ma page est construite, je suis quasi obligé d'apeller twPositionRelativeFixe(evt) par twInit(), elle même chargée via onMouseOver sur l'image qui se trouve "sous" le "layer_transp"...ou la la

je ne suis pas sûr que le problème se situe au niveau du script, mais plutôt au niveau de la feuille de style de ton image et de ton layer.

Dans un de tes précédent messages, tu as un Conflit sur un calque entre position et width. Je vais le regarder ce qui a été dit là-dessus.
- pourquoi supperposes-tu ces deux éléments (d'après ce que j'ai vu c'est pour placer un texte sur ton image) ?
- lorsque tu recherches les coordonnées, le layer est sous ou sur l'image?
- est-ce que ces éléments changent de plan (le calque passe dessous et l'image dessus et réciproquement) ?
Je me demande si cela ne vient pas des z-index, ou des positions relative ou absolue de tes éléments.

Comme tu as pu le constater précédemment le script fonctionne. C'est quand tu l'insères dans ta page que plus rien ne va.
08/09/2006, 12h08
renaud26

mais alors pouquoi c'est nickel avec IE ??? 8O
08/09/2006, 14h47
renaud26

Finalement, j'ai fini par trouver la soluce, tout bêtement en mettant une position relative au layer_transp1...mais je te dois une fière chandelle car c'est ton bout de code qui m'a mis sur la voie. Merci ! et bonne fin de journée.;)
08/09/2006, 16h07
Auteur

Citation:

Envoyé par renaud26

mais alors pouquoi c'est nickel avec IE ??? 8O

:roll: Joker :D

Citation:

Finalement, j'ai fini par trouver la soluce, tout bêtement en mettant une position relative au layer_transp1...mais je te dois une fière chandelle car c'est ton bout de code qui m'a mis sur la voie. Merci ! et bonne fin de journée. ;)

De rien....