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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Position souris, et récupération x et y par formulaire

BreizhynGd

Hello world!

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

Publicité

youdontcare

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>

BreizhynGd

Hello world!

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

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

shinji

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.

antibillou

Si je t'attrape je te mord !!!

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=

youdontcare

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

shinji

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

BreizhynGd

Hello world!

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

shinji

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!

FORUM HardWare.fr

Programmation

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

Sujets relatifs
[ Javascript ] Vérification de formulaire	[ACCESS] Comment désactiver la roulette de la souris ?
[HTML] probleme lors de l'envoi de mail par formulaire HTML	pour les pro de l'asp : formulaire?
Access - enregistrements des données d'un formulaire dans une table	[PHP] cache, history.back(), formulaire...
[HTML] Type et taille d'une police dans les éléments d'un formulaire	[PHP] Récupération infos navigateurs...
pb de formulaire	Formulaire
Plus de sujets relatifs à : Position souris, et récupération x et y par formulaire

Page générée en 0.046 secondes