Récupérer les coordonnées de clic sur image

[yoshï]

Bonjour,
avant toute chose, je tiens à signaler que je débute dans l'utilisation avancée de javascript (et notamment de la bibliothèque Mootools).
Je me tourne vers vous car je souhaiterai avoir votre avis sur la faisabilité de la chose suivante:

Je veux récupérer les coordonnées d'un clic sur une image (pour les stocker dans une BDD).

1) En gros j'ai une image. La personne peut cliquer dessus, les coordonnées sont stockés via javascript et un petit icône apparaît à l'endroit ciblé. Si la personne clique de nouveau sur l'image les nouvelles coordonnées écrasent les anciennes et l'icône se déplace. J'aimerai pouvoir actualiser l'image sans avoir de rechargement de page. Je pense arrivé à mes fins avec AJAX.
Quand la personne désire valider sa localisation elle clique sur un bouton et je stocke les coordonnées dans une BDD mySQL.

2) Je souhaiterai également savoir si vous voyez un moyen en javascript de faire un petit effet (cercles concentriques type echo radar) autour de l'icone sur l'image. Je sais que Javascript n'a pas vocation à faire des animations, mais les nouvelles biblio comme mootools semblent pouvoir faire pas mal de truc assez visuel.

J'aimerai pouvoir faire tout ça en javascript. je pense arriver à faire le 1 mais le 2) c'est plus tendu. Je me tournerai peut être vers flash si je n'arrive pas à faire ce que je veux.

Merci d'avance pour vos conseils

[vermine]

Bonjour,

1) Récupérer des coordonnées selon la page, oui :

Code :

1
2
3
 
//Fonction Mootools
getPosition()

Sauf que je ne sais pas ce que ça donne sur un onClick car en fait il faut un élément de base sur lequel exécuter la fonction.

Sur l'image, c'est moins évident. Je ne sais pas si on peut retravailler la fonction proposée ci-dessus ou bien si il existe une version qui donne la position dans une image. Quoiqu'il en soit, vous connaissez la position de l'image donc vous pouvez faire un petit calcul pour déterminer la position sur l'image.


2) Euh. Je ne suis pas sûr d'avoir compris. Vous pouvez jouer sur la transition des styles.

[vermine]

Au temps pour moi, on peut jouer directement sur l'évènement click :

Code :

1
2
3
4
5
6
 
var monImage = $('id_image');
 
monImage.addEvent('click', function(event){
    alert(event.client.x); 
});

Il y a client.x, client.y, page.x, page.y. Page c'est la fenêtre total (par exemple si la page est plus longue que l'écran), et client c'est par rapport à ce que l'on voit si j'ai bien compris (sans tenir compte des scrollbar).

Grâce à ces informations et grâce au getPosition() de l'image, vous pouvez retrouver la position sur l'image.