> How can I capture mouse position on Image?
Do you mean a mouse *click*, or some way of keeping
track of where the mouse is hovering over the image?
Do you mean the mouse position relative to the image,
or relative to the entire page?
Assuming you mean a mouse *click* and the position
relative to the image (i.e., upper left corner is
always '0,0'), the following will get you the x-position.
Extrapolate for yourself the y-position:
<a href="#" onClick="getXY (event); return false"
<img name="myImg" src="..." >
</a>
function getImgX (evt) {
var img_x;
var img_y;
if (document.all) { // MSIE
img_x = evt.offsetX;
img_y = evt.offsetY;
} else { // Netscape, etc.
img_x = evt.clientX;
img_y = evt.clientY;
for (var offMark = evt.target; offMark;
offMark = offMark.offsetParent) {
img_x -= offMark.offsetLeft;
}
for (var offMark = evt.target; offMark;
offMark = offMark.offsetParent) {
img_y -= offMark.offsetTop;
}
}
var coordinates = 'x: ' + img_x + ', y: ' + img_y;
alert (coordinates);
}
[snip]
otherwise, I need to find out position of my image so I can calculate.
Thanks!
function getImgCoords () {
var x = 0;
var y = 0;
var el = document.myImg;
do {
x += el.offsetLeft;
y += el.offsetTop;
}
while ((el = el.offsetParent));
return {x: x, y: y};
}
Best regards
