coordonnée sur une image sous FireFoxRésolu

Question

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. Genere votre banniere D'avance merci pour votre aide precieuse.

PetoleTeam · Accepted Answer

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)

Flachy Joe · Answer

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

Mastronic · Answer

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.

Mastronic · Answer

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.

Mastronic · Answer

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.

Coordonnée sur une image sous FireFox

5 réponses

Votre réponse

Discussions similaires