Fare clic su un'immagine, ottenere coordinate


5

So che si può fare e ho anche una vaga idea di come farlo, ma si ferma a essere vago.

Ho un tag immagine HTML standard con un'immagine al suo interno, 100 per 100 pixel di dimensione. Voglio che le persone siano in grado di fare clic sull'immagine e per far passare la X e la Y che fanno clic su una funzione.

Le coordinate devono essere relative all'immagine in alto ea sinistra.

vi ringrazio in anticipo per qualsiasi aiuto.

+1

risposte questa discussione esattamente lo stesso <a href="http://bytes.com/forum/thread507079.html">question</a> Con più informazioni <a href="http://www.quirksmode.org/js/events_properties.html#position">here</a> 21 ago. 082008-08-21 08:05:59

4

penso che si stia parlando:

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

Quando presentate, ci sono valori di forma per il coordinate X e Y in base all'ID elemento di input (info.x e info.y in questo caso).

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


0

da ciò che si descrive è necessario registrarsi per l'evento del mouse sull'immagine, per questo caso si dovrebbe avere l'evento immagine pulsante del mouse.

alla funzione che dovrebbe utilizzare

Point mousePoint = e.GetPosition(this); 

che vi darà la posizione del mouse in base ai migliori punti di sinistra Int pixel.

rispetto allo mousePoint è possibile stampare le informazioni X e Y.


0

Sostituire la tela con l'immagine e funzionerà lo stesso

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>