Entry
Can I capture image's XY position thru mouseover event of Image?
Apr 6th, 2008 18:36
ha mo, Joshua Maag, David Johannsson, Chris Bitting, John Amit, Dave Pedowitz,
Thanks for reply.
But when i tried this codes it gives the same values, I think it gives
relative value rather than screen positions.
Actually I need image coord because :
I am using an javascript Drop down menu, this menus codes are writeen
on an images's OnMouseOver event. The menu works fine when viewed on
800X600 resolution but when resolution is higher menu comes to left,
so
I need the coord of that image so that i can pass starting position
for
menu.
What do you suggest in this regard?
Thanks again.
Amit
Yes you can, the following code should work on IE 4 + and NS 4 +:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
var d = document;
//Get the img X and Y positions with an onMouseOver event
function getCoor(imgId) {
var x = (d.layers)?d[imgId].x:d[imgId].offsetLeft;
var y = (d.layers)?d[imgId].y:d[imgId].offsetTop;
alert("x = " + x + "\ny = " + y);
}
</script>
</head>
<body>
<p>
<p>
<br>
<br>
<br>
<a href="#" onMouseOver="getCoor('myImg')"><img
src="http://www.faqts.com/images/javascript-faqts.gif" width="346"
height="29" alt="" border="0" name="myImg"></a>
</body>
</html>
This above code works great!! Thanks! But i have one slight problem
i'd
love for someone to help me out with: I'm using this image inside of a
table in IE and it doesn't give the correct XY value, just gives 0,0.
But
in Netscape works fine. Any suggestions?
Thanks so much!! -Chris Bitting
Has any one found a solution for the IE problem with it giving 0,0,
cordnets when an image is nested inside a table?
If so please contact me at david@atom.is
Thanks david
David,
I simplified the method to not need to require so much information.
function GetImageLocation(image) {
var x = (document.layers) ? image.x : image.offsetLeft;
var y = (document.layers) ? image.y : image.offsetTop;
alert(x + "," + y);
}
The beauty of this function is that you can pass different types of
items into it, not just images. This solves your problem of the table too.
The problem that you are seeing with IE returning 0,0 is that the
location is based on the location inside the table, not on the whole
page itself.
On the table you can add the onmouseover="GetImageLocation(this);" which
will give you the location of the table, then you can use this same
method on the image to give you the location of the image. once that's
done, just add the sums and you have an accurate coordinate. Of course
you may want to modify this by adding a bool as a parameter so you can
say if this is a table, store the table information into global
variables, otherwise do whatever.
I hope that helps.
Joshua Maag
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com
