View Full Version : get x,y coordinates of image

05-09-2007, 02:53 PM
Hi, just wondering if its possible to find the x and y coordinates of an image using the onmousemove method. Specifically I need to know if this can be done using onmousemove. If so, how would I put it in my img code for the image.
If this can't be done with onmousemove, what other method would I use?

Here's my image.
<p><img src="assets/header.gif" width="700" height="70" </p>

05-10-2007, 12:34 AM
You can do anything you want in the onmousemove method, including getting the coordinates of an image. I'm not sure what you're really trying to do. Do you want the coordinates of the mouse over the image? Here are a couple of functions that can help, one to retrieve the position of an element and the other to retrieve the position of the mouse.

find the position of an element

function findPos(elem) {
elem = $(elem);
var curleft=0, curtop=0;

if (elem.offsetParent) {
curleft = elem.offsetLeft;
curtop = elem.offsetTop;

while (elem = elem.offsetParent) {
curleft += elem.offsetLeft;
curtop += elem.offsetTop;

return {x:curleft, y:curtop};

Find the position of the mouse

Event = {};
Event.getMousePositionX = function(e) {
if (e.pageX) {
return e.pageX;
else if (e.clientX) {
return e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
else {
return null;

Event.getMousePositionY = function(e){
if (e.pageY) {
return e.pageY;
else if (e.clientY) {
return e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
else {
return null;

Event.getMousePosition = function(e) {
return {x:Event.getMousePositionX(e), y:Event.getMousePositionY(e)};

Then if you are looking for the mouse's position inside the image subtract the mouses position from the images. For example you might use this callback function

var onImageMouseOver = function(e) {
var ipos = findPos(this);
var mpos = getMousePosition(e);
var xpos = ipos.x - mpos.x;
var ypos = ipos.y - mpos.y;

&lt;img src="assets/header.gif" width="700" height="70" onmouseover="onImageMouseOver " /&gt;

05-10-2007, 02:05 AM
Thanks alot :)