Afficher les coordonnées d'un layer dans des champs texte

Version imprimable

Bonjour à tous,

Je rame lamentablement, malgré des tas de recherche. Je voudrais afficher les coords X et Y d'un layer draggable sur une image dans des champs texte nommés X et Y. Voici comment j'ai fait, mais les coordonnées sont fausses...
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 function twPositionRelative(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.pageX - document.getElementById("monID").offsetLeft; nOffsetY = evt.pageY - document.getElementById("monID").offsetTop; } //monID est le calque draggable dont je veux les coordonnées document.all.X1.innerText = nOffsetX; //input X document.all.Y1.innerText = nOffsetY; //input Y } } function twInit() { var oImage = document.getElementById("image")//le calque de l'image if (oImage) { oImage.onmousemove = twPositionRelative; } }
la fonction twInit() se charge avec body
les 2 inputs text X et Y sont ok: les coords s'affichent bien, mais erronées

les layers :
Code:

1 2 3 4 5 6 7 <img src="image.gif" width="468" height="60" id="image"> <div id="monID" class="zone">TEXTE</div> <script type="text/javascript" language="javascript"> document.getElementById("monID").style.cursor = 'move'; new Draggable('monID',{}); </script>
Vous voyez ce qui cloche ?
Je veux bien un coup de main...merci !

11/08/2006, 21h39
FremyCompany

pk ne pas utiliser this.offsetTop/offsetLeft ?

Ben en faisant ça, c'est ce que je pensais faire...

Code:

1
2
3
4
 
 
nOffsetX = evt.pageX - document.getElementById("monID").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monID").offsetTop;

Non ?

12/08/2006, 16h42
Sergejack

Elles sont éronnées comment tes valeurs ?

Si tu les calcules après le déplacement, les offest sont les valeurs à afficher et non pas mouseX - offsetLeft et mouseY - offsetTop (qui te dooneront alors forcement des valeurs constantes).

PS : Les offset peuvent avoir a être calculer en fonction des conteneurs ancêtres.
12/08/2006, 17h10
renaud26

pas facile à dire comment les valeurs sont erronées...
Et oui, je veux que le user puisse déplacer le layer sur l'image, puis lorsque il lâche le bouton de la souris, cela "fige" X et Y dans les inputs...
12/08/2006, 17h22
FremyCompany

pageX n'est pas reconnu par tous les navigateurs.... si ?
12/08/2006, 17h40
renaud26

Très franchement Fremy, je n'en sais rien...je voudrais déjà faire fonctionner ça avec IE, ce serait très bien !
12/08/2006, 18h12
Sergejack

Tu ne peux pas et déplacer le div et utiliser comme référence ses offsets puisque ces justement ceux ci que tu changes.

C'est comme calculer du siège arrière d'une voiture, qu'elle ne va pas vite en considérant le passager avant comme point de repère et donc : "Je ne le dépasse jamais.".

N'utilise comme référence que les coordonnées du curseur.
12/08/2006, 18h22
renaud26

Tu veux dire obliger le user à positionner son curseur sur l'angle du layer pour afficher les coords puis les noter lui même dans les champs ???
j'avoue que je ne te suis pas bien...:oops:
12/08/2006, 19h23
Sergejack

?

Attends...
Pour placer ton div à la bonne position que dois-tu connaître ?
Seulement la position de la souris ?
12/08/2006, 19h34
renaud26

Mais peut-être me suis-je mal expliqué:

Mon div est draggable, positionné sur une image. Le user le déplace à son gré dans cette image en maintenant le bouton de souris enfoncé. Lorsque le div est à la position voulue, il lâche le bouton de la souris. A ce moment là j'ai besoin de connaître X et Y de la dernière position du div dans l'image. Je sais pas si je suis plus clair, là...:roll:
12/08/2006, 19h40
Sergejack

Citation:

Envoyé par renaud26

Mais peut-être me suis-je mal expliqué:

Mon div est draggable, positionné sur une image. Le user le déplace à son gré dans cette image en maintenant le bouton de souris enfoncé. Lorsque le div est à la position voulue, il lâche le bouton de la souris. A ce moment là j'ai besoin de connaître X et Y de la dernière position du div dans l'image. Je sais pas si je suis plus clair, là...:roll:

Donc : la bonne position c'est la position de la souris, tant que la souris est dans l'image.
C'est ça, cette fois ?
12/08/2006, 19h52
renaud26

oui, ou les coordonnées du layer à sa dernière position dans l'image.

Citation:

Envoyé par FremyCompany

pageX n'est pas reconnu par tous les navigateurs.... si ?

Je te conseille de faire une recherche ;)

Si tu cherche la position de la souris, voici le script que j'utilise et qui marche très bien :
Code:

1 2 3 4 5 6 7 8 9 var Mouse={"x":0,"y":0}; function OnMouseMoveEventHandler(e) { Mouse.x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; Mouse.y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; if (Mouse.x < 0) {Mouse.x=0;} if (Mouse.y < 0) {Mouse.y=0;} } document.onmousemove=OnMouseMoveEventHander;

13/08/2006, 11h50
renaud26
oui, merci Fremy. Ton script donne, je pense, le même résultat que celui que j'ai mis en tête de ce post, à savoir les coordonnées de la souris. Si on ajoute ces lignes, on peut même définir les coords sur une image plutôt que sur la page entière (ce que je recherche)
Code:

1 2 3 4 var oImage = document.getElementById("image") oImage.style.cursor = "crosshair" oImage.onmousemove = OnMouseMoveEventHander;
Mais dans mon cas, puisque cette image possède un layer texte draggable, cela oblige le user à positionner le layer puis postionner la souris dans le coin inférieur gauche du layer et noter X et Y. Pas très pratique...Puisque dès qu'il bouge la souris, les coords changent. Le script dropdrag que j'utilise (wz_dragdrop) possède une fonction qui permet de noter la position du layer draggable. Hélas, c'est toujours par rapport à la page entière et non par rapport à l'image...Et je ne sais pas le transformer pour cela...
un casse-tête. :?
15/08/2006, 13h53
renaud26

donc pas de soluce ???:cry: