Haz clic en una imagen, consigue las coordenadas

Question

Sé que se puede hacer e incluso tengo una vaga idea de cómo hacerlo, pero deja de ser vago.

Tengo una etiqueta de imagen HTML estándar con una imagen, de 100 por 100 píxeles. Quiero que las personas puedan hacer clic en la imagen y que pasen las X e Y que hacen clic en una función.

Las coordenadas deben ser relativas a la imagen superior e izquierda.

Gracias de antemano por cualquier ayuda.

Answer 1

creo que estamos hablando:

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

Cuando presentado, hay valores de formulario para la coordenada X e Y según el ID de elemento de entrada (info.x y info.y en este caso).

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

Answer 2

de lo que usted describe usted debe registrarse para el evento de imagen del ratón, para este caso se debe tener el evento de botón de imagen del ratón.

en la función que debe utilizar

Point mousePoint = e.GetPosition(this); 

que le dará la posición del ratón de acuerdo al principio de puntos izquierda píxeles int.

que en el mousePoint puede imprimir la información X e Y.

Answer 3

Vuelva a colocar la lona con su imagen y funcionará de la misma

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>