Get Image Coordinates With jQuery

Applications like PhotoShop make it easy to find the X,Y coordinates of points within an image. But, what about when you need to get that information from a user on your website? This script lets you grab the coordinate of any point of an image via jQuery (a free JavaScript library). In this example, we don't do anything with the coordinates except print them to the screen, but you could easily save them for use elsewhere.

1.   <script type="text/javascript" src=""></script>
2.   <div><span id="image_coords_click"></span><span id="image_coords_now">&nbsp;</span></div>
3.   <img id="image" src="../images/inkplant/code/penguin.jpg">
4.   <script type="text/javascript">
5.     $('#image').mousemove( function(event) {
6.   	window.current_x = Math.round(event.pageX - $('#image').offset().left);
7.   	window.current_y = Math.round(event.pageY - $('#image').offset().top);
8.   	window.current_coords = window.current_x + ', ' + window.current_y;
9.   	$('#image_coords_now').html('Current: ' + window.current_coords + '.');
10.    }).mouseleave( function() {
11.  	$('#image_coords_now').html('&nbsp;');
12.    }).click( function() {
13.  	$('#image_coords_click').html('Last click: ' + window.current_coords + '. ');
14.    });
15.  </script>

You can see a working example of the above code at our Image Coordinates tool. From there, you can also find the coordinates of your own image; it lets you swap the image out with your own.

1 Comment

July 14, 2015, 11:21 pm
but i would like to ask is it possible to make the coordinates appear on a textbox in a php form?

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on September 22nd, 2014 by Robert James Reese in the following categories: Images, JavaScript, and jQuery. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.