Cliquez sur une image, obtenez les coordonnées

Question

J'ai une balise d'image HTML standard contenant une image d'une taille de 100 par 100 pixels. Je veux que les gens puissent cliquer sur l'image et que les valeurs X et Y qu'ils cliquent soient transmises à une fonction.

Les coordonnées doivent être relatives au haut et à la gauche de l'image.

Answer 1

Je pense que vous parlez de :

<input id="info" type="image">

Lorsqu'il est soumis, il y a des valeurs de formulaire pour les coordonnées x et y basées sur l'id de l'élément d'entrée ( info.x y info.y dans ce cas).

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1

Answer 2

D'après ce que vous décrivez, vous devriez vous inscrire à l'événement de la souris de l'image, dans ce cas, vous devriez avoir l'événement du bouton de la souris de l'image.

à la fonction, vous devez utiliser

Point mousePoint = e.GetPosition( this );

qui vous donnera la position de la souris en fonction du point supérieur gauche en int pixels.

que lors de la mousePoint vous pouvez imprimer les informations X et Y.

Answer 3

Remplacez le canevas par votre image et vous obtiendrez le même résultat.

let img = document.getElementById("canvas");

img.x = img.getBoundingClientRect().left;
img.y = img.getBoundingClientRect().top;

function click(e) {
  document.getElementById("output").innerHTML = "X coords: " + (e.clientX - img.x) + "<br> Y coords: " + (e.clientY - img.y);
}

img.addEventListener("click", click);

<!--- Like a image --->
<canvas id="canvas" width="100" height="100"></canvas>
<p id="output"></p>