javascript - tag - Haga clic en una imagen, obtenga coordenadas

mapa de imagenes html

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 de tamaño. 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 estás hablando de:

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

Cuando se envía, hay valores de formulario para la coordenada xey según el elemento de entrada id (info.x e info.y en este caso).

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

Answer 2

según lo que describa, debe registrarse en el evento de mouse de imagen; en este caso, debe tener el evento de botón de mouse de imagen.

en la función que deberías usar

Point mousePoint = e.GetPosition( this );

eso le dará la posición del mouse de acuerdo con el punto superior izquierdo int píxeles.

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

Answer 3

Reemplaza el lienzo con tu imagen y funcionará igual

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>