Click an image, get coordinates

Question

I have a standard HTML image tag with an image in it, 100 by 100 pixels in size. I want people to be able to click the image and for that to pass the X and Y that they click into a function.

The coordinates need to be relative to the image top and left.

Solution 1

I think you're talking about:

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

When submitted, there are form values for the x and y coordinate based on the input element id (info.x and info.y in this case).

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

Solution 2

Replace the canvas with your image and it will work the same

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>

Comments

[Pat]

This thread answers exactly the same <a href="bytes.com/forum/thread507079.html">question</a> With more info <a href="quirksmode.org/js/…>