Position du curseur sur une image

06 mars 2007, 03:05

Bonjour,

Je voudrais réaliser une page sur laquelle, entre autre, on peut voir une image qui représente une carte d'un département. Jusque là ce n'est pas très compliqué, mais je voudrais que lorsque le curseur passe au dessus de cette image la position du curseur soit affichée. J'ai réussi à faire cela mais je me base sur la position du curseur par rapport au coin supérieur gauche de la fenêtre et non pas le point supérieur gauche de l'image comme je le voudrais. Cela pose problème car si la fenêtre contient un ascenceur les positions sont déréglées.

Mes questions sont donc les suivantes :

Y-a-t il un moyen pour avoir la position du curseur par rapport au coin supérieur gauche d'une image ?
Avez vous une meilleur idée pour coder ce genre de chose ?

Merci d'avance.

06 mars 2007, 12:31

Salut à toi,

La solution est élémentaire : il suffit de se servir du décalage de ton image dans la page (offsetTop et offsetLeft de ton image) et d'utiliser un jeu de soustraction par rapport au layerX et layerY de ton clic.

Bien à toi et bonne chance,

Phil

06 mars 2007, 12:44

ok merci,
en fait j'avais essayé ca mais ca me retournait tout le temps 0 et 0 en offset... Mais j'ai trouvé un code qui fonctionne pour obtenir les coordonnées donc ca fonctionne. Merci beaucoup !

06 mars 2007, 13:04

Aie,

Ca marche parfaitement avec FireFox, mais avec IE si la fenêtre contient une barre de défilement cela ne fonctionne plus, même si je rappelle la fonction pour obtenir la fonction initiale... Quelqu'un a-t-il une idée ou une explication ??

Je met mon code qui me permet d'avoir la position initiale et de récupérer la position du curseur lorsqu'il est sur l'image... merci...

Code : Tout sélectionner

function get_initial_position(obj_){
  x_initial=0;
  y_initial=0;
  var Obj  =  obj_;
  //-- Si l'objet existe
  if( Obj){
    //-- Si propriété existe
    if( Obj.offsetParent){
      //-- Récup. Position Objet
      x_initial = Obj.offsetLeft;
      y_initial = Obj.offsetTop;
      //-- Tant qu'un parent existe
      while( Obj = Obj.offsetParent){
        //-- Ajout position Parent
        x_initial += Obj.offsetLeft;
        y_initial += Obj.offsetTop;
      }
    }
  }
}

function get_position(e)
	{
	var carte_departement = document.getElementById("carte_departement");
	//initial_x = carte_departement.style.left;
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	x=x-x_initial;
	y=y-y_initial;
	document.getElementById("positionx").innerHTML = "Abscisse : "+x;
	document.getElementById("positiony").innerHTML = "Ordonnee : "+y;
	}

06 mars 2007, 13:17

Hello à toi,

Les dimensions et positionnements se récupèrent différemment sur IE et FF. Les attributs ne sont pas les mêmes.

Il faut donc que tu fasses un test du navigateur et que tu traites en fonction.

Mais ça existe encore Internet Explorer ?… Savais pas…

Bien à toi et bonne chance,

Phil

06 mars 2007, 13:36

Janvier 2007 - "Internet Explorer est encore le navigateur le plus utilisé, avec un taux mondial d'utilisation de 85,61 % !" (source OneStat)
Bon, on descend quand même à 76.90% selon les stats de Xiti (avant la sortie de IE7, les autres ne sont pas encore sorties ou alors j'ai pas trouvé) ...

M'est avis qu'il va falloir continuer à faire du compatible encore un p'tit moment

06 mars 2007, 13:48

Hello Ryle,

Ce qui est très drôle, c'est que dès qu'on touche à ça, les réactions ne se font pas attendre.

Bien à toi,

Phil

06 mars 2007, 13:53

Re-hello,

J'avais pas regardé ton code en détail, mais…

… Ça paraît un chouillat compliqué, non ?… (c'est l'hôpital qui se moque de la charité

) — je parle de moi, bien sûr)

Elle est appelée par qui et comment ta fonction get_initial_position(obj_) ?

Et puis, je ne suis pas certain que l'utilisation de pageX et pageY soit aussi pertinente que l'utilisation de layerX et layerY.

Mais ce que j'en dis…

Bien à toi et bonne chance,

Phil

06 mars 2007, 13:57

pourtant c'est la réalité.

On dirait que souvent les anti IE sont les développeurs et non les utilisateurs.

Mais bon, pour reprendre la discussion, sous IE on utilise .Top, .Left et window.event.x, window.event.y

06 mars 2007, 14:14

Re- ryle,

On dirait que souvent les anti IE sont les développeurs et non les utilisateurs.

Je ne suis pas développeur, rassure-toi. Je suis juste un utilisateur qui développe

. Et même avant que FF existe, je n'aimais pas IE. Je ne développe que pour les amis, et sous FF. Pour certains trucs, j'ai des briques qui s'occupent du trans-application.

pour reprendre la discussion, sous IE on utilise .Top, .Left et window.event.x, window.event.y

Merci, je l'avais sous le bout de la langue.

Et pour Guilt, une indication : l'objet sur lequel l'utilisateur clique se trouve dans `e.target`, où e est l'event click. Il est donc très simple d'avoir ses positions sans passer par une boucle parentale compliquée.

Bien à vous,

Phil

06 mars 2007, 14:20

Elle est appelée par qui et comment ta fonction get_initial_position(obj_) ?
Et puis, je ne suis pas certain que l'utilisation de pageX et pageY soit aussi pertinente que l'utilisation de layerX et layerY.

En fait c'est un peu plus compliqué que ca car la source de l'image est dynamique, l'image est chargée lorsque l'utilisateur saisi un code postal... Bref la fonction get_initial_position(obj_) est appelée lorsque l'image est chargée. Sinon pour layerX et layerY je ne sais pas ce que c'est...

Pour le e.target je suis pas sur d'avoir bien compris mais en fait ce que je voudrais c'est afficher les positions au fur et a mesure que le curseur se déplace sur l'image... Mais j'avoue que la dedans je n'y connais pas grand chose donc j'ai surtout pris des bouts de code existant et je les ai plus ou moins modifié ce qui explique surement la complexité non nécessaire...

Ceci dit j'ai l'impression que ca fonctionne a présent avec IE et FF, j'espere que c'est du code "fiable"... Voila le résulat :

Code : Tout sélectionner

function get_position(e){
  var DocRef;
 //Cas firefox (entre autres)
  if( e && e.target){
    x = e.pageX;
    y = e.pageY;
  }
  else{
    if(document.documentElement && document.documentElement.clientWidth) DocRef = document.documentElement;
    else DocRef = document.body;
    x = event.clientX +DocRef.scrollLeft-2;
    y = event.clientY +DocRef.scrollTop-2;
	}
	x=x-x_initial;
	y=y-y_initial;
	document.getElementById("positionx").innerHTML = "Abscisse : "+x;
	document.getElementById("positiony").innerHTML = "Ordonnee : "+y;
}

Il serait mieux de remplacer pageX et pageY par layerX et layerY ?

Merci en tous cas

06 mars 2007, 14:45

Re hello,

Oui, je comprends mieux. C'est marrant, je suis tout autant amateur que toi, mais je me suis toujours dit que j'y gagnerais en temps et en satisfaction, plutôt que de glâner des petits codes par-ci par-là, à comprendre dans la mesure du possible ce qui se passait.

Je me rends compte tous les jours que cette démarche est bonne

(sans vouloir te juger, bien sûr, chacun ses trucs

)

Toujours est-il que pour ton problème, extrêmement simplissime, il se réduit en fait à mettre un "écouteur d'évènement" sur ton image (addEventListener) et de faire une fonction qui relève les positions. En gros, 5 lignes de code :

Code : Tout sélectionner


/* Je chope l'image */
var tonObjetImage = document.getElementById("carte_departement");

/*

  Je lui colle un écouteur d'évènement "move"

*/
tonObjetImage.addEventListener('mousemove', maFonctionCapturante, false) ;
// Ça veut dire : dès que la souris se déplacera sur `tonObjetImage` 
// (donc la carte de département), elle appellera la fonction 
// `maFonctionCapturante` en lui envoyant les données de l'évènement 
// (l'évènement mousemove, en l'occurence)
// Le "false", tu t'en occupes pas, c'est pour que l'évènement poursuive
// sa route, poursuive son chemin, passe le message à ton voisin…

// Ensuite, il suffit de définir ta fonction de capture
// Tu lui donnes bien sûr le nom que tu veux

function maFonctionCapturante ( e ) {
// e contient toutes les infos sur l'évènement move
// Entre autre chose, la cible (target, nom très mal choisi,
// en l'occurence, mais bon…).
// Ici, ta cible, c'est bien sûr la carte des départements, puisqu'il n'y
// a qu'elle qui appelle cette fonction (ton "addEventListener").
// Toujours est-il que tu peux récupérer sa position dans la page :

var posY = e.target.offsetTop ; // traduire pour IE
var posX = e.target.offsetLeft ; // traduire pour IE

// Tu prends les coordonnées de ta souris dans la page
var posMouseX = e.layerX ; // traduire pour IE
var posMouseY = e.layerY ; // traduire pour IE

// Et tu fais ta petite soustraction pour obtenir les coordonnées
// de la souris relativement à la carte des départements :
var posRelativeX = posMouseX - posX ;
var posRelativeY = posMouseY - posY ;

// Et bien sûr, tu l'affiches comme tu l'as fait

}

Tu vois, j'ai menti, il y a 9 lignes de codes, tout compris…

(désolé s'il y a des petites erreurs, j'ai pas tout vérifié)

Bien à toi et bonne chance,

Phil

06 mars 2007, 14:50

Merci pour ces précisions effectivement ca m'aide a comprendre. Je suis d'accord avec toi quant au fait qu'il vaut mieux comprendre que "copier" mais c'est vrai qu'en général on trouve plus facilement du code que des explications sur le net donc j'essaye de comprendre par le code ce qui n'est pas toujours facile.

En tous cas merci pour ton aide et pour tes explications.

07 mars 2007, 10:02

Hello Guilt,

mais c'est vrai qu'en général on trouve plus facilement du code que des explications sur le net donc j'essaye de comprendre par le code ce qui n'est pas toujours facile.

Rien de tel que d'essayer de comprendre le code pour apprendre, je suis bien d'accord avec toi.

En revanche, je ne peux pas te laisser dire qu'on ne trouve pas d'*explications* sur le net. Ce serait nier le travail généreux de tous ces informaticiens qui prennent du temps à faire des tutoriels, souvent de très haute qualité, et autres « banques de ressources » gratuites qui permettent d'avoir des explications détaillées sur tous les éléments de n'importe quel langage.

Des forums comme celui-là ne devrait servir qu'à « aller plus loin », alors qu'on se rend compte que beaucoup de « questionneurs » n'ont même pas pris la peine de chercher un peu, ce qui, malheureusement, incite « ceux qui savent », modérateurs ou autres, à ne répondre qu'avec parcimonie à nos interrogations. Je les comprends, et je le regrette.

C'est la raison pour laquelle je ne pose pas, à regret, les questions dont seul un expert pourrait me donner la réponse. Tu vois, par exemple, en ce moment, j'aimerais comprendre pourquoi le `mafonction.caller.name` ne contient rien lorsque mafonction est appelée depuis un prototype de classe. Après des heures de fouille archéologique sur le net, je n'ai rien trouvé sur le sujet, mais je n'ose pas poser la question, elle resterait malheureusement sans réponse.

Remarque bien que je ne parle pas de ton problème particulier, qui relève de concepts plus compliqués (la gestion des évènements), qu'il est souvent plus délicat, pour nous, d'appréhender. J'ai mis un certain temps avant d'être à l'aise avec eux. Mais encore une fois, ce sont les tutoriels qui m'ont permis de bien comprendre (j'espère avoir bien compris

).

Bonne chance à toi en tout cas, et n'hésite pas à rajouter ici un petit lien vers le résultat de tes expériences !

Phil

21 mars 2007, 15:51

Pourquoi programmer l'animation d'un tel scénario. Utilises plutôt les balises MAP qui permettent le mappage de zones cliquable d'une image.

Pour celà regarde ici >>> http://www.w3schools.com/tags/tag_map.asp

Position du curseur sur une image

Qui est en ligne