capture mouse position on Image

[Jay]

Hi,

How can I capture mouse position on Image?
I found number of script capturing mouse position of the page.
But I could not find anything based on image.

What I want to find out is X Y coordinates of mouse position. based on left
of the top of my image is 0 0 (X Y coordinates)

otherwise, I need to find out position of my image so I can calculate.
Thanks!

-Jay

 

[Arvin Portlock]

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

 

[Michael Winter]

On Tue, 04 Jan 2005 13:22:45 -0800, Arvin Portlock

[snip]

function getImgX (evt) {
var img_x;
var img_y;
if (document.all) { // MSIE

The presense of the document.all collection does not indicate IE; other
browsers implement it, too.

The test you should be performing is, "are the offsetX/Y properties
present"?

/* You could test for offsetY as well, but it would be stupid for
* an implementation one and not the other.
*/
if('number' == typeof evt.offsetX) {
/* ... */
} else {
/* ... */
}

[snip]

Mike

 

[Jay]

Thanks guys!
it worked!!

 

[DU]

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 link should always have a valid href value and should act like a link
in all circumstances (when js support is disabled). Here, a button would
be better.

</a>

function getImgX (evt) {
var img_x;
var img_y;
if (document.all) { // MSIE

Not true. Opera 7.x supports document.all and complies with DOM 2 events
interface.

img_x = evt.offsetX;
img_y = evt.offsetY;
} else { // Netscape, etc.
img_x = evt.clientX;
img_y = evt.clientY;

clientX and clientY are relative to the viewport; offsetParent is
relative to the document containment hierarchy bubbling all up until the
offsetParent is the Initial Containing Block. Your code won't return the
correct value when the image is inside the document scroll view
(horizontal or vertical).

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));

This will trigger a bug in recent Mozilla and Opera releases. Best is to
make the assignment in the loop, not in the boolean condition because
the assignment may succeed while the el value might be null.

do {
x += el.offsetLeft;
y += el.offsetTop;
el = el.offsetParent;
}
while (el);


DU