finding position of a mouse click, using Mozilla

N

Nick Wedd

I have this
<DIV id="canopy" onClick="myhandler(event.x,event.y); return false;">
<IMG border=0 height=66 width=292 src="gifs/top.gif">
</DIV>
which works in IE. myhandler gets called with the coordinates of where
the mouse was clicked relative to the <HTML>, and I know where my DIV
is, so I can calculate which part of the image was clicked on.

But with Mozilla, I can't use event.x and event.y, only event.screenX
and event.screenY. These are relative to the whole screen, and so are
affected by the positioning of the browser window and the amount of
browser chrome, so I can't translate them to the frame of my image.

Is there a simple way to deal with this? A Google search leads me to
pages like http://www.mozilla.org/docs/events.html which I am not able
to understand.

The best I can come up with is to create a bunch of empty ("visible" but
transparent) layers that sit in front of my "canopy" layer and catch the
mouse clicks.

Nick
 
T

Tomasz Cenian

Nick Wedd napisał(a):
I have this
<DIV id="canopy" onClick="myhandler(event.x,event.y); return false;">
<IMG border=0 height=66 width=292 src="gifs/top.gif">
</DIV>

You surely missed
event.clientX, event.clientY.

Do not use event.x - its obsolete and IE only.
 
N

Nick Wedd

[QUOTE="Tomasz Cenian said:
<DIV id="canopy" onClick="myhandler(event.x,event.y); return false;">
<IMG border=0 height=66 width=292 src="gifs/top.gif">
</DIV>

You surely missed
event.clientX, event.clientY.

Do not use event.x - its obsolete and IE only.[/QUOTE]

Great! Thanks very much for the advice.

Nick
 
R

RobG

Nick said:
I have this
<DIV id="canopy" onClick="myhandler(event.x,event.y); return false;">
<IMG border=0 height=66 width=292 src="gifs/top.gif">
</DIV>
which works in IE. myhandler gets called with the coordinates of where
the mouse was clicked relative to the <HTML>, and I know where my DIV
is, so I can calculate which part of the image was clicked on.

But with Mozilla, I can't use event.x and event.y, only event.screenX
and event.screenY. These are relative to the whole screen, and so are
affected by the positioning of the browser window and the amount of
browser chrome, so I can't translate them to the frame of my image.

Is there a simple way to deal with this? A Google search leads me to
pages like http://www.mozilla.org/docs/events.html which I am not able
to understand.

The section of the Mozilla site you were after is:

*DOM Reference*:
<URL:http://www.mozilla.org/docs/dom/domref/>

*Event Reference*

<URL:http://www.mozilla.org/docs/dom/domref/dom_event_ref.html#998197>

Where you will find references to W3C DOM properties clientX/Y
and screenX/Y and the older, non-W3C layerX/Y, pageX/Y.

If you are doing stuff with coordinates, the "Viewport" link at
quirksmode.org is an invaluable reference:

<URL:http://www.quirksmode.org/index.html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,817
Latest member
DicWeils

Latest Threads

Top