Position du curseur sur une image

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Position du curseur sur une image

L'éléphance du code

par Phil93 » 22 mars 2007, 13:53

Salut Sadeq,
Pourquoi alors ne pas utiliser un bouton de type image dont les coordonnées sont transmissibles au clic donc au submit du formulaire qui le contient :lol:
LOL

Très éléfant… heu, élégant, en effet.:lol:

Bien à toi,

Phil

par sadeq » 22 mars 2007, 13:40

Pourquoi alors ne pas utiliser un bouton de type image dont les coordonnées sont transmissibles au clic donc au submit du formulaire qui le contient :lol:

Du lard ou du cochon pour de rire

par Phil93 » 22 mars 2007, 08:51

Salut à vous,
Je suis entièrement d'accord (sauf que c'est Guilt92 et pas Guilt12 ^^)
Oh désolé, Guilt92 (moi, je suis du 93 ;-) — tu es de Clichy ? de Levallois ? d'Asnières).
je pense que dans mon cas les map area ne pouvaient pas s'appliquer...
J'en étais convaincu, il me semblait que tu avais bien présenté ton problème.

Mais rassure-toi, cette façon de répondre, en demandant au « questionneur » pourquoi il ne fait pas autrement que comme il veut faire, on peut la noter sur tous les forums, et de tout bord (bricolage, informatique, crochet-maison, mécanique). 1 fois sur 2, au lieu de répondre (simplement) à la question, le répondeur use du papier virtuel à dire « Mais pourquoi donc que tu ne fais pas plutôt comme ça que je suis sûr que c'est mieux pour toi ? ».

En me prêtant à une petite analyse statistique, j'en arrive à :

— 76.3% des fois, le « questionneur » part sur un mauvais chemin, le « répondeur » le ramène dans le droit. Ça fait quand même 23.7% qui pose la bonne question, qui partent, comme Guilt92, dans la bonne direction…

— La question n'est compréhensible que dans 17.8% des cas. Dans les autres cas (82,2%), elle n'est compréhensible que par celui qui la pose.

— 56% des fois, le « répondeur » fait preuve d'un manque d'imagination patent, ou cherche à ramener la question à ce qu'il connaît (syndrome de Peters bien connu).

Et pourtant, pourtant, pourtant…

— Prêt de 99% des questionneurs sont satisfaits par les remontées d'information et trouvent que les forums (dixit) « c'est super pratique ».

Bien à vous tous,

Phil

PS: On parie que ce message non plus ne va pas rester longtemps à sa place ? Je ne suis pas une fonction ! Je ne suis pas une procédure ! Je ne peux pas me résumer à un seul sujet par message !!!
(spéciale dédicace aux érudits qui connaissent « Le Prisonnier » ;-) )

par guilt92 » 22 mars 2007, 04:28

Sans vouloir répondre à la place de Guilt12, le mappage des zones cliquables, bien que fort sympathique, est inopérant dans de nombreux cas, où on en arriverait à faire une zone pour chaque pixel.
Je suis entièrement d'accord (sauf que c'est Guilt92 et pas Guilt12 ^^) et je pense que dans mon cas les map area ne pouvaient pas s'appliquer...
En fait le but est une partie administration ou une personne peut ajouter des points sur une carte.

Ainsi dans un formulaire il entre le numéro de la région, la carte apparait et il choisit ou il veut que son point apparaisse. J'ai donc pensé que le plus simple était de récupérer la position du curseur par rapport a l image de la carte et lorsqu'il clique cela met a jour les champs positionx et positiony dans le formulaire...

Je ne vois pas trop comment j'aurai pu faire avec les map area sans savoir à la base ou il voulait cliquer...

Mappage ou Nappage ?

par Phil93 » 21 mars 2007, 16:09

Hello !
Pourquoi programmer l'animation d'un tel scénario.
Si Guilt12 se propose de le faire, je pense qu'il a ses raisons. Laissons-les lui. ;-)
Utilises plutôt les balises MAP qui permettent le mappage de zones cliquable d'une image.
Sans vouloir répondre à la place de Guilt12, le mappage des zones cliquables, bien que fort sympathique, est inopérant dans de nombreux cas, où on en arriverait à faire une zone pour chaque pixel. ;-)

Bien à toi,

Phil

par sadeq » 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

Tuto tutos tuti

par Phil93 » 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

par guilt92 » 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.

À droite et à gauche

par Phil93 » 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 :lol: (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

Re: Limite compliqué

par guilt92 » 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

Vise la cible

par Phil93 » 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

par sadeq » 06 mars 2007, 13:57

pourtant c'est la réalité. :wink:

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

Limite compliqué

par Phil93 » 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… :lol:

Bien à toi et bonne chance,

Phil

À tous les coups l'on gagne

par Phil93 » 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. :D

Bien à toi,

Phil

par Ryle » 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 ;)