Viewed 11075 times

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.

3 answers given for "Click an image, get coordinates"

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

from what you describe you should register to the image mouse event, for this case you should have the image mouse button event.

at the function you should use

Point mousePoint = e.GetPosition( this );

that will give you the mouse position according to the top left point int pixels.

than at the mousePoint you can print the X and Y information.

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>