Klicken Sie auf ein Bild, erhalten Sie Koordinaten

Question

Ich weiß, dass es getan werden kann und ich habe sogar eine vage Vorstellung davon, wie es geht, aber es hört auf, vage zu sein.

Ich habe ein Standard-HTML-Bild-Tag mit einem Bild, 100 x 100 Pixel groß. Ich möchte, dass die Leute in der Lage sind, auf das Bild zu klicken und dafür das X und Y zu übergeben, auf das sie in eine Funktion klicken.

Die Koordinaten müssen relativ zum Bild oben und links sein.

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Ich glaube, Sie sprechen:

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

Wenn vorgelegt, gibt es Formularwerte für die x- und y auf dem Eingangselement id Koordinate basierend (info.x und info.y in diesem Fall).

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

Answer 2

von dem, was Sie beschreiben Sie das Bild, Maus-Ereignis registrieren sollten, für diesen Fall sollten Sie das Bild Maustaste Ereignis haben.

an der Funktion, sollten Sie

Point mousePoint = e.GetPosition(this); 

verwenden, die die Mausposition nach oben links Punkt int Pixeln geben.

als bei der mousePoint können Sie die X-und Y-Informationen drucken.

Answer 3

Ersetzen Sie die Leinwand mit Ihrem Bild und es wird die gleiche

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>