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



--
*************** *** End of Message *************** ***

[Arvin Portlock]

Re: capture mouse position on Image

> 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.offsetP arent) {
img_x -= offMark.offsetL eft;
}
for (var offMark = evt.target; offMark;
offMark = offMark.offsetP arent) {
img_y -= offMark.offsetT op;
}
}
var coordinates = 'x: ' + img_x + ', y: ' + img_y;
alert (coordinates);
}

[snip]
[color=blue]
> otherwise, I need to find out position of my image so I can calculate.
> Thanks![/color]

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]

Re: capture mouse position on Image

On Tue, 04 Jan 2005 13:22:45 -0800, Arvin Portlock
<apollock11@hot mail.com> wrote:

[snip]
[color=blue]
> function getImgX (evt) {
> var img_x;
> var img_y;
> if (document.all) { // MSIE[/color]

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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Jay]

Re: capture mouse position on Image

Thanks guys!
it worked!!


"Jay" <no@spam.com> wrote in message
news:creu8d$2oj c$1@msunews.cl. msu.edu...[color=blue]
> 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[/color]
left[color=blue]
> 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
>
>
>
> --
> *************** *** End of Message *************** ***
>
>[/color]

[DU]

Re: capture mouse position on Image

Arvin Portlock wrote:
[color=blue][color=green]
> > How can I capture mouse position on Image?[/color]
>
> 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="..." >[/color]

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.
[color=blue]
> </a>
>
> function getImgX (evt) {
> var img_x;
> var img_y;
> if (document.all) { // MSIE[/color]

Not true. Opera 7.x supports document.all and complies with DOM 2 events
interface.
[color=blue]
> img_x = evt.offsetX;
> img_y = evt.offsetY;
> } else { // Netscape, etc.
> img_x = evt.clientX;
> img_y = evt.clientY;[/color]

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).
[color=blue]
> for (var offMark = evt.target; offMark;
> offMark = offMark.offsetP arent) {
> img_x -= offMark.offsetL eft;
> }
> for (var offMark = evt.target; offMark;
> offMark = offMark.offsetP arent) {
> img_y -= offMark.offsetT op;
> }
> }
> var coordinates = 'x: ' + img_x + ', y: ' + img_y;
> alert (coordinates);
> }
>
> [snip]
>[color=green]
> > otherwise, I need to find out position of my image so I can calculate.
> > Thanks![/color]
>
> function getImgCoords () {
> var x = 0;
> var y = 0;
> var el = document.myImg;
> do {
> x += el.offsetLeft;
> y += el.offsetTop;
> }
> while ((el = el.offsetParent ));[/color]

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
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.3 :)
[color=blue]
> return {x: x, y: y};
> }
>
> Best regards
>[/color]