Klicken Sie auf ein Bild, erhalten Sie die Koordinaten

Ich weiß, es kann getan werden, und ich selbst habe eine vage Idee, wie es zu tun, aber es hält sich im vagen.

Ich habe eine standard-HTML-Bild-tag mit einem Bild drin, von 100 x 100 Pixel in der Größe. Ich möchte, dass die Leute in der Lage, klicken Sie auf das Bild und für die, die übergeben werden, die X und Y, dass Sie mit einem klicken in eine Funktion.

Die Koordinaten müssen relativ zu den Bild oben und Links.

Vielen Dank im Voraus für jede Hilfe.

InformationsquelleAutor Teifion | 2008-08-21
  1. 5

    Ich denke, Sie sprechen über:

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

    Als eingereicht, es sind Werte für die x-und y-Koordinate, die basierend auf dem input-element die id (info.x und info.y in diesem Fall).

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

    InformationsquelleAutor Jon Galloway
  2. 1

    von dem, was Sie beschreiben, sollten Sie sich registrieren, um das Bild der Maus-Ereignis für diesen Fall sollten Sie das Bild der Maus-Taste-Ereignis.

    in der Funktion, die Sie verwenden sollten, 

    Point mousePoint = e.GetPosition( this );

    dass Ihnen die Maus-position entsprechend dem oberen linken Punkt int Pixel.

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

    InformationsquelleAutor
  3. 1

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

    JS:

    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);

    HTML:

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

    InformationsquelleAutor TessavWalstijn
Schreibe einen Kommentar