...

View Full Version : get x,y coordinates of image



melCarmasin
05-09-2007, 01: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>

cyberlogi
05-09-2007, 11:34 PM
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 :
document.body.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 :
document.body.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;

melCarmasin
05-10-2007, 01:05 AM
Thanks alot :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum