faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

32 of 54 people (59%) answered Yes
Recently 7 of 10 people (70%) answered Yes

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 [email protected]
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