Klicken Sie auf ein Bild, erhalten Sie Koordinaten


5

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.

+1

Dieser Thread Antworten genau die gleiche <a href="http://bytes.com/forum/thread507079.html">question</a> Mit mehr Informationen arbeiten <a href="http://www.quirksmode.org/js/events_properties.html#position">here</a> 21 aug. 082008-08-21 08:05:59

4

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


0

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.


0

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>