begin process at 2012 05 29 07:05:40
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

coordonnée sur une image sous FireFox

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

coordonnée sur une image sous FireFox

dimanche 17 décembre 2006 à 12:13:35 | coordonnée sur une image sous FireFox

Mastronic

Membre Club

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

<form>
  <input name="text2" type="text" class="textbox" id="X" size="10">
  <input name="text2" type="text" class="textbox" id="Y" size="10"><br>
  <input name="text2" type="text" class="textbox" id="X2" size="10">
  <input name="text2" type="text" class="textbox" id="Y2" size="10"><br> 
</form>
<br>
<IMG  src="mastronic.jpg" class="img_src" id="img_src" onclick="affiche_xy(this)";>

</body>
</html>

D'avance merci pour votre aide precieuse.
dimanche 17 décembre 2006 à 13:02:35 | Re : coordonnée sur une image sous FireFox

Flachy Joe
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
lundi 18 décembre 2006 à 02:23:45 | Re : coordonnée sur une image sous FireFox

Mastronic

Membre Club

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.
lundi 18 décembre 2006 à 13:25:36 | Re : coordonnée sur une image sous FireFox

Mastronic

Membre Club

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.
lundi 18 décembre 2006 à 18:02:50 | Re : coordonnée sur une image sous FireFox

PetoleTeam

Membre Club
Réponse acceptée !

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] +"<BR>");
   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)

mardi 19 décembre 2006 à 01:42:46 | Re : coordonnée sur une image sous FireFox

Mastronic

Membre Club

Merci d'avoir pris le temps de repondre.
Merci 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.


Cette discussion est classée dans : document, body, value, getelementbyid, parentnode

Répondre à ce message

Sujets en rapport avec ce message

je comprend pas ?! [ par stequer ] voilas je suis nul en javascript pourier vous m'aider voila mon erreurError: document.getElementById("civilite") has no propertiesSource File: http:// document.getElementById('body').style.overflow='hidden' [ par Grand Mamamouchi ] Bonsoir !peux-tu m'expliquer pourquoi l'overflow n'est pas masque (jedeveloppe sur Mozilla 1.6) ?document.getElementById('body').style.overflow='hidde Calcul [ par dity ] DiTy AkA B@d Boµ Bonjour, je suis bloqué devant un travail... Je doit faire un calculateur en javascript, une page html & un fichier js pour exécute sauce light pour fichier js [ par tonytruand ] Bonjour, Un tuyau SVP, à partir d'un formulaire, et en fonction des choix exprimés, je rapatrie des informations diverses grâce au : if (document.getE Ptite question sur une function js [ par destiny ] Bonjour tlm :)Voila j'ai fais une ptite function js qui me modifie la VALUE de mon input suivant la valuer d'un checkbox!function MajTexteValider() {  URGENT !! validation formulaire avec php [ par romainst ] Bonjour j'ai un énorme problème que je dois résoudre rapidement c'est pour ça que j'en appelle à votre aide,J'ai créé récemment ce formulaire de vote Firefox et le javascript [ par destiny ] Lo all,Voila ma function qui va modifier la date de 'Fin sejour' suivant le nbr de semaine souhaiter par rapport à la date du debut du sejour 'Debut s extraire plusieurs mots [ par tonytruand ] Bonsoir,J'ai trové de nombreux moteurs de recherches intra page, moi ce que j'aimerais faire c'est pouvoir extraire dans une page plusieurd mot pré dé imbriquer des fonctions [ par tonytruand ] Bonjour;N'ayant jamais été déçu de vos réponses, je me permets d'en poser une nouvelle . J'ai une fonction qui balaie des ARRAY avec i++, le problème DOCUMENT.WRITE [ par tonytruand ] Bonjour à tous!,J'ai besoin de votre aide car je ne comprends pas tout. j'ai fait en javscript un petit support de recherche.Le principe : j'ai une ba


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy S
Entre 529€ et 529€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,640 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)