Cliquez sur une image, obtenir des coordonnées

Question

Je sais que cela peut être fait et j'ai même une vague idée de la façon de le faire, mais il cesse d'être vague.

J'ai une étiquette d'image HTML standard avec une image de 100 x 100 pixels. Je veux que les gens puissent cliquer sur l'image et pour que le X et le Y passent dans une fonction.

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

Merci d'avance pour toute aide.

Answer 1

Je pense que vous parlez:

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

Lorsqu'ils sont soumis, il y a des valeurs de forme pour les coordonnées x et y en utilisant l'identifiant d'élément d'entrée (info.x et info.y dans ce cas).

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

Answer 2

de ce que vous décrivez, vous devez vous inscrire à l'événement de la souris d'image, pour ce cas, vous devriez avoir l'événement bouton de la souris d'image.

à la fonction que vous devez utiliser

Point mousePoint = e.GetPosition(this); 

qui vous donnera la position de la souris selon les pixels int haut point gauche. Qu'à , vous pouvez imprimer les informations X et Y.

Answer 3

Remplacer la toile avec l'image et il fonctionnera de la même

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>