Comments on: Click image and get coordinates with Javascript

By: Syteg

Syteg — Tue, 08 Nov 2011 09:30:22 +0000

Thank you, Ottavio. I use this script, providing by your link, it works really well. Just look at: http://www.scribd.com/doc/29158842/Get-Mouse-Position-Relative-to-Image

By: jeba

jeba — Tue, 01 Nov 2011 10:13:46 +0000

Thank you ,
It was helpful

By: Jessica

Jessica — Thu, 20 Oct 2011 09:57:19 +0000

Great this posting…!
But I have Problem,
how about if i show the image in
div pan tag that has resolution 500×500 pixel in style.css
the image has resolution 800×800
so the image just show in 500×500
but it can move to right, left up and down with pan control.

the problem is
when i click image just show coordinates in max 500×500
but the image has resolution 800×800
has any ideas??

You pointed on x = – y =

and style.css
#pan :{
border: #dddddd 1px solid;
width: 500px;
height: 500px;
overflow: hidden;
}

the code is work but the coordinates
X and Y is just in div pan with max 500×500 pixel

By: nikolas

nikolas — Sat, 18 Jun 2011 03:45:30 +0000

Thanx great example

By: Mehdi

Mehdi — Mon, 06 Jun 2011 07:23:52 +0000

Thank you ,
It was helpful

By: toys online

toys online — Fri, 27 May 2011 04:22:18 +0000

This is brilliant. How would I determine the co-ordinates of different areas of an image to use coords?

By: Hao Zhe XU

Hao Zhe XU — Tue, 17 May 2011 08:56:32 +0000

This is wonderful, however, does it still work if I view the website of the image in a mobile phone browser and pinched to zoom it in/out?

Thanks!

By: Thomblin

Thomblin — Mon, 25 Apr 2011 18:58:41 +0000

Thanks a lot, helped me very much, but I used the version of Farit (on July 14, 2007 at 11:51 pm) like this

var pos_x = 0;
var pos_y = 0;
function get_click_coords(event)
{
var pointer_div = document.getElementById(‘captcha’);

// IE
if (window.ActiveXObject)
{
pos_x = window.event.offsetX;
pos_y = window.event.offsetY;
}
// Firefox
else
{
var top = 0, left = 0;
var elm = pointer_div;
while (elm)
{
left += elm.offsetLeft;
top += elm.offsetTop;
elm = elm.offsetParent;
}

pos_x = event.pageX – left;
pos_y = event.pageY – top;
}
}

By: Vasim Padhiyar

Vasim Padhiyar — Tue, 19 Apr 2011 16:02:49 +0000

Thanks for post…

By: Tomas

Tomas — Mon, 18 Apr 2011 09:25:01 +0000

Hello there,

Thank you very much. Very helpful & useful. As for the pointer bug. Here is the solution:

document.getElementById(“cross”).style.left = (pos_x-1).toString() + “px” ;
document.getElementById(“cross”).style.top = (pos_y-15).toString() + “px”;