Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Click an image, get coordinates

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.

like image 779
Teifion Avatar asked Aug 21 '08 08:08

Teifion


People also ask

How do I find the coordinates of an image click?

To get the mouse click coordinates for image with JavaScript, we can add a click event listener to the img element. to add an img element. to select the img element with querySelector . Then we set img.

How do you find the coordinates in HTML?

In order to find the coordinates of the top left corner of the HTML page, you can use the web browser's instance properties DisplayRectangleX and DisplayRectangleY. For example, after storing a browser's instance into the variable %Browser%, then %Browser. DisplayRectangleX% will return the X dimension and %Browser.

How do you put coordinates into an image in HTML?

The coords attribute specifies the coordinates of an area in an image map. The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area. Tip: The coordinates of the top-left corner of an area are 0,0.


1 Answers

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

like image 70
Jon Galloway Avatar answered Sep 23 '22 21:09

Jon Galloway