Position souris, et récupération x et y par formulaire

Position souris, et récupération x et y par formulaire - Programmation

Marsh Posté le 18-08-2001 à 22:55:18    

Par exemple, j'ai un image 400.200 pixel, et je veux récupérer la position x et y du curseur lorsque je clique à un endroit précis sur l'image.  
Les positions seront récupérer lors d'un clique sur l'image ds un formulaire et un pt s'afficherait sur l'image lors du clique.
 
Un peu compliqué à expliquer, mais je veux les positions par rapport à l'image, et non par rapport à la fenêtre du navigateur.  
 
Je crois que c'est du javascript qu'il faudrait ici, et étant novice en javascript, une p'tite aide s'impose  
 
merci!


---------------
Sparf! - Http://sparf.free.fr - France
Reply

Marsh Posté le 18-08-2001 à 22:55:18   

Reply

Marsh Posté le 18-08-2001 à 23:37:05    

alors alors ... pour ie (je ne connais pas netscape)
 
* chaque élément reçoit des événements pour le clic, l'appui sur une touche, etc .... tu peux associer un hander pour tel événement, par ex onClick='alert("clicked" )'
 
* chaque handler reçoit un objet event qui contient les coordonnées de la souris, relatives ...
 - à l'objet : offsetX et offsetY
 - à la fenêtre html : x et y
 - à l'écran : screenX et screenY
 
* pour positionner une image, tu passes par les css : attributs position ('absolute' et 'relative'), left et top (respectivement x et y)
 
* pour accéder à un objet, il faut lui filer un nom : par ex <img id='myCursor' src='a.jpeg'> après on peut y accéder en script par myCursor.attribute = value (myCursor.src = 'b.jpeg')
 
* pour modifier une valeur d'un formulaire, on utilise la méthode précédente, à une petite différence près : quand on est dans un formulaire, il faut le spécifier :
<form id='myForm'>
 <input id='myInput' type='text'>
</form>
<script>
 myForm.myInput.value = 'bonjour';
</script>
 
* pour mettre un curseur sur l'image et updater une valeur dans une input, le plus lisible est de passer par une fonction :
 
<img src='myImage.jpeg' onClick='handleClick(event)'>
<img id='myCursor' src='cursor.jpeg'>
 
<script>
 function handleClick(e)
 {
  // pour le positionnement du curseur, c'est plus simple de passer en absolu
  myCursor.style.position = 'absolute';
  myCursor.style.left = e.x;
  myCursor.style.top = e.y;
  myForm.myInput.value = e.offsetX + ' ' + e.offsetY;
 }
</script>

Reply

Marsh Posté le 20-08-2001 à 12:40:21    

Merci! Je vais essayer de me débrouiller avec tout cela!!


---------------
Sparf! - Http://sparf.free.fr - France
Reply

Marsh Posté le 20-08-2001 à 15:18:13    

Plus court:
<HTML>
<BODY>
<form name="f1" action="tableau.php">
<input type="image" name="Visu" src="france.gif" border="0" ALIGN=ABSBOTTOM>
</form>
</BODY>
</HTML>
 
Dans la page tableau.php tu récupères la position où l'utilisateur à cliqué:
Visu.x et Visu.y sont passé en paramètres dans l'url.

Reply

Marsh Posté le 20-08-2001 à 15:43:49    

Génial, je ne connaissais pas, par contre, je n'arrive pas à récupérer ces coordonnées en PHP, à cause du point dans la variable !!!!


---------------
http://212.95.67.13/fla/pri.cgi?a= [...] 50&f=20&g=
Reply

Marsh Posté le 20-08-2001 à 16:00:51    

du coup j'ai peur d'avoir mal compris ... le code plus haut sert à afficher un curseur dynamiquement sur l'image et à mettre ses coordonnées dans un formulaire ... oups :/

Reply

Marsh Posté le 20-08-2001 à 16:55:29    

antibillou a écrit a écrit :

Génial, je ne connaissais pas, par contre, je n'arrive pas à récupérer ces coordonnées en PHP, à cause du point dans la variable !!!!  




 
Y a moyen, je pense.
Sinon enlève le name="Visu" et tu auras directement $x=.. et $y=... dans la page tableau.php

Reply

Marsh Posté le 20-08-2001 à 17:19:06    

shinji a écrit a écrit :

Plus court:
<HTML>
<BODY>
<form name="f1" action="tableau.php">
<input type="image" name="Visu" src="france.gif" border="0" ALIGN=ABSBOTTOM>
</form>
</BODY>
</HTML>
 
Dans la page tableau.php tu récupères la position où l'utilisateur à cliqué:
Visu.x et Visu.y sont passé en paramètres dans l'url.  




 
Mais c'est bien par rapport à l'image?
 
En fait, pour tout vous dire (ce sera plus simple à comprendre):
C'est pour un prog qui permettra aux visiteurs de s'enregistrer (nom,prenom,adress,email,age,icq...) et de donner leur position dans la France. Il la choisiront en cliquant à l'endroit où ils habitent.
Pour voir tt le monde, des points sur la carte (par exemple) indiqueront la position des personnes, et au survol de ce point avec la souris, les infos s'afficgeront dans un petit cadre avec la souris.
 
Je compte le faire en php et mysql, mais il me faut ces bouts de code pour l'enregistrement d'une personne. Pour la visualisation, y-a pas de pb à priori.
 
Si qq'1 se propose de m'aider pour une partie du prg, pas de pb!!!


---------------
Sparf! - Http://sparf.free.fr - France
Reply

Marsh Posté le 20-08-2001 à 17:33:53    

Ouais, c'est par rapport à l'image!
Vérifie mais je m'en serait rendu compte parce que je l'utilise dans mon site et ça marche!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed