Getting Image X Y coordinates of an Image on click in PHP

The example below will display the values of the coordinate ( X and Y ) of the point you click.

 X=, Y=

Here is the code

<?Php
$foo_x=$_POST['foo_x'];
$foo_y=$_POST['foo_y'];
echo "X=$foo_x, Y=$foo_y ";
?>
<form action='' method=post>
<input type="image" alt=' Finding coordinates of an image' src="xy-coordinates.jpg"
name="foo" style=cursor:crosshair;/>
</form>

Collecting the values of the coordinates of any image is a common requirement in many applications. For example if we have one map and wants the visitors to click on any area of the map to enlarge ( zoom ) it then we must know the coordinates of the click point where the visitor wants to be magnified.
Based on the coordinates in X and Y plot of the image we can further process the script to give desire result.
Here by using CSS, your mouse pointer is changed to cross. You can learn more on how to change the mouse pointer in our CSS section or click here.

Coordinates X Y

Note that the value of X ( horizontal ) and Y ( Vertical ) coordinate is zero at the top left corner of the image. It reaches its maximum value at the right bottom point of the image.

We can get the coordinates without reloading the page.
Image Coordinates by using JQuery
Captcha Generation script
GD functions

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Paco	21-08-2012
This was so helpful and saved me a lot of time. Thanks a lot.

Dennis	15-10-2012
How would i use this method if i wanted to have 2 images that i want to click before the form posts?

Mahesh Todkar	22-08-2014
This is really superb. now i dont need to use javascript for that and which helps me a lot and save my time as well.

Mary	05-04-2013
it was so helpful! Thank you very much! ^_^

	23-04-2021
COOL TAHNKS

Collecting the coordinates data inside of an image on click

Coordinates X Y

Subhendu Mohapatra