Coordonnée sur une image sous FireFox

[Résolu]
Signaler
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012
-
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012
-
Bonjour,

j'ai un script qui fonctionne tres bien sous Internet Explorateur mais pas sur FireFox.
je n'arrive pas à recupérer les coordonnées quand je clique sur une image sous FF.
j'essaye par moi meme de resoudre le probleme mais je n'y arrive pas. (encore debutant dans la matiere)

je vous joins le code allégé avec affichage des coordonnées.

<html>
<head>
<title>Genere votre banniere</title>
<script language="javascript">



function affiche_xy(this_)
{
  
 var posX=event.clientX;
 var posY=event.clientY;



 document.getElementById("X").value  =  posX - this_.parentNode.offsetLeft  + document.body.scrollLeft;
    document.getElementById("Y").value  =  posY - this_.parentNode.offsetTop   + document.body.scrollTop;



 document.getElementById("X2").value =  posX - this_.parentNode.offsetLeft - this_.offsetLeft + document.body.scrollLeft;
    document.getElementById("Y2").value =  posY - this_.parentNode.offsetTop  - this_.offsetTop + document.body.scrollTop;
}



</script>
</head>




<form>
 
 

 
 
 
</form>






</html>


D'avance merci pour votre aide precieuse.

5 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
B
onjour...

une solution consiste à mettre un événement sur le mousemove du document par exemple
document.onmousemove = WhereMouse;

cette fonction mets dans des variables globales la position de la souris, ici Mouse_X et Mouse_Y...
//--------------------
function WhereMouse(e){
  var DocRef;
  //-- On traque les hybrides
  if( e && e.target){
    Mouse_X = e.pageX;
    Mouse_Y = e.pageY;
  }
  else{
    if( document.documentElement && document.documentElement.clientWidth)
      DocRef = document.documentElement;
    else
      DocRef = document.body;

    Mouse_X = event.clientX +DocRef.scrollLeft;
    Mouse_Y = event.clientY +DocRef.scrollTop;
  }
  return( true);
}
...pour plus d'info voir

POSITION DE LA
SOURIS DANS LA PAGE
, mais je pense que tu la déjà vu...





ceci étant tu récupéres la position de la souris quelque soit la position dans la page scrollée ou non.





maintenant il te faut récupérer la position de l'objet cliquer...
pour cela, et d'après ce que je vois il te faut une fonction absolue, l'image peut être impriquée
//----------------------

function ObjGetPos(obj_){
  var PosX = 0;
  var PosY = 0;
  var Obj  =  obj_;
  //-- Si l'objet existe
  if( Obj){
    //-- Si propriété existe
    if( Obj.offsetParent){
      //-- Récup. Position Objet
      PosX = Obj.offsetLeft;
      PosY = Obj.offsetTop;
      //-- Tant qu'un parent existe
      while( Obj = Obj.offsetParent){
        //-- Ajout position Parent
        PosX += Obj.offsetLeft;
        PosY += Obj.offsetTop;
      }
    }
  }
  //-- Retour des positions
  return([PosX, PosY]);
}
cette fonction remonte donc au body pour récupérer la position absolute de l'objet...
son appel peut se fait de la façon suivante
//--------------------------------
function Afficher_Position( this_){
  var Pos =new Array();
  Pos =

ObjGetPos (obj_)
  document.write("Pos_X = " +Pos[0] +"
");

  document.write("Pos_Y = " +Pos[1]);


}


Il te suffit donc pour connaître la position dans l'image par exemple de faire la soustraction




Pos_X = Mouse_X -Pos[0];
Pos_Y = Mouse_Y -Pos[1];





Je ne sais si j'ai été bien clair, à toi de mettre de l'ordre...










;0)
Messages postés
2089
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
27 juin 2021
1
Salut, voila un script qui devrai fonctionner pour les 2 navigateurs :

        img = document.getElementById('img');
        img.onclick = clicked;
        function clicked(e)
        {
            if (!e){
                e = window.event;
            }
            if (!e.layerX){
                e.layerX = e.offsetX;
                e.layerY = e.offsetY;
            }
            alert ('Clic en x=' + e.layerX + ' y=' + e.layerY);
        }

Flachy Joe
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012

Tiens bonjour, monsieur carte de france ;-)

Ton code me dit quelque chose ^^

donc je réecris le code..
j'insére les deux lignes si dessous dans ma function affiche_xy(this_)

img = document.getElementById('img_src');
img.onclick = clicked;
   
Sous IE, cela fonctionne, mais sous FF (FireFox) les coordonnées ne prenne pas en compte le decallage de l'image par rapport au bord de la fenetre de l'explorateur..
Comment faire?

Si non peut tu m'expliqué dans ton code (ci dessous) qui est compatible et avec quoi ?



if (!e){
   e = window.event;
}

if (!e.layerX){
 e.layerX = e.offsetX;
 e.layerY = e.offsetY;
}



car je veux pour mon scripte obtenir deux couples de coordonnées..
Cordonnée de l'image ( origine en haut à gauche de l'image)
et ceux pour effectué des taches sur l'image.. ( decoupe, ajoue de texte )

Cordonnée de la fenetre de l'explorateur ( origine en haut à gauche de la fenétre)
et ceux pour afficher un cadre en supperposition sur l'image.

D'avance merci, et Merci pour avoir pris le temps de repondre.
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012

Escusé moi, pour la taille de police du message précedant..

une autre question qui s'ajoute:

comment je fait pour recupérér les coordonnées de la fonction clicked?
 
j'ai essayé de declaré en variable global (enfin, je pensse):
var posX;
var posY;

ensuite dans la fonction cliked, j'ai ajouter à la fin:
posX=e.layerX;
posY=e.layerY;

Enfin j'essaye de l'afficher dans ma fonction affiche_xy
  document.getElementById("X").value  = posX;
  document.getElementById("Y").value  = posY;

Au lieux de voir les coordonnées je vois undefined s'affiché..  je comprend pas pourquoi.

D'avance merci pour votre aide.
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012

Merci d'avoir pris le temps de repondre.

Merci 653783 PetoleTeam: Toujours des réponses de qualitées. Je crois que ce post va servir à pas mal de personnes. Oui, j'avais déja lue le tutoriaux et je ne sais pas pourquoi je n'est pas pris cette solution efficace de suite..


je viens d'adapter mon script, ca fonctionne tres bien sur FF et IE.

Pour la fonction ObjGetPos() c une tres bonne technique la boucle permettant de calculé tous les offset.

J'ai remarqué sous IE V6.0, il existe un décallage de 2 pixels, en X comme en Y... (je l'avais déja remarqué avec mon script).
je ne sais pas si cela s'applique à tous les navigateurs Internet Explorateur

j'ai donc soustrait deux au variables Mouse:
    Mouse_X = event.clientX +DocRef.scrollLeft-2;
    Mouse_Y = event.clientY +DocRef.scrollTop-2;

Encore merci.