Discussion :

[renaud26]

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]

bonjour,

utilise innerHTML au lieu d'innerText

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

[Shivan]

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]

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]

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]

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]

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à ?