HI I am working on a project which is used to find the shortest path
between two location on the map of my city, so when I click on the map
I get the x,y coordinate of the whole page not of the image by using
event.x , event.y . But I need a function that maybe use the image as a
parameter to get the x,y of this image.
Shameram Sadaki
thanx in advance
The point is that your image is placed in another element (so-called
"offsetParent"), that is itself placed in another one and so on. I can
not see your code but I can suppose it looks like:
<table>
<tr>
<td>
<img ....
First of all I should recommend you to use clientX and clientY instead
of x and y (x,y works only in IE). Then you have to calculate total
offset and adjust primary values of x, y coordimates.
Example:
<html>
<head>
<script type="text/javascript">
function MouseClick(sender, e)
{
//total offset for X-axis
var deltaX = 0;
//total offset for Y-axis
var deltaY = 0;
var elem = sender;
while(elem!=null && elem.offsetLeft!=null && elem.offsetTop!=null)
{
deltaX+=elem.offsetLeft;
deltaY+=elem.offsetTop;
elem = elem.offsetParent;
}
//relative coordinates
var imageX = e.clientX - deltaX;
var imageY = e.clientY - deltaY;
alert("clientX=" + e.clientX +";clientY="+ e.clientY + ";imageX=" +
imageX +";imageY="+ imageY);
}
</script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img onclick="MouseClick(this, event);"
src="10_69.jpg"/>
</td>
</tr>
</table>
</body>
</html>
