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

**renaud26** · 06/09/2006, 18h57

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 :

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

**Auteur** · 06/09/2006, 20h22

bonjour,

utilise innerHTML au lieu d'innerText

**renaud26** · 07/09/2006, 10h41

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

**Shivan** · 07/09/2006, 11h46

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 :

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
 
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;
	}
}

**renaud26** · 07/09/2006, 12h12

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

**Auteur** · 07/09/2006, 14h18

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

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

**renaud26** · 07/09/2006, 15h04

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 :

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

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 :

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

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

**Auteur** · 07/09/2006, 17h30

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

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

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

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

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

**renaud26** · 07/09/2006, 19h16

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

**Auteur** · 07/09/2006, 20h15

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

Je pense que tu as dû oublier de préciser certains paramètres de ton div.

**renaud26** · 08/09/2006, 08h56

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

**renaud26** · 08/09/2006, 09h41

Bon, j'ai repris calmement les choses...et pu simplifier à l'extrême la fonction...

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

**Auteur** · 08/09/2006, 10h52

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.

**renaud26** · 08/09/2006, 12h08

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

**renaud26** · 08/09/2006, 14h47

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.

**Auteur** · 08/09/2006, 16h07

Envoyé par renaud26

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

Joker

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

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

JavaScript

Discussions similaires

Partager

Partager