Coordinates when moving mouse over an image

[Hvid Hat]

Hello

How can I display the coordinates when moving mouse over an image? I want
the image coordinates.

And another question. How how can I draw a horizontal line on the y coordinate
of mouse?

 

[Bart Van der Donck]

How can I display the coordinates when moving mouse over an image? I want
the image coordinates.

What do you mean by 'image coordinates' ? Width and height ?

<img border="0" alt=""
src="http://groups.google.be/groups/img/3nb/groups_bar_nl.gif"
onMouseOver="alert('width='+this.width+' height='+this.height)">

Or do you want to find the position on the screen ? Then you should
define that first:

style="position: absolute; top: 90px; left: 60px;"

And another question. How how can I draw a horizontal line on the y
coordinate of mouse?

You may be interested in the library of Walter Zorn:

http://www.walterzorn.com/

Hope this helps,

 

[Thomas 'PointedEars' Lahn]

What do you mean by 'image coordinates' ? Width and height ?

<img border="0" alt=""
src="http://groups.google.be/groups/img/3nb/groups_bar_nl.gif"
onMouseOver="alert('width='+this.width+' height='+this.height)">

Or do you want to find the position on the screen ? Then you should
define that first:

style="position: absolute; top: 90px; left: 60px;"

Utter nonsense. It is quite obvious that the OP does not want the image
absolutely positioned, and that they are interested in the coordinates of
the cursor of the pointing device, relative to either the screen, the
viewport, or the image. This has been answered before.

You may be interested in the library of Walter Zorn:

http://www.walterzorn.com/

Zorn's script code is outdated and obviously written by a clueless person.

Stop recommending it.


PointedEars

 

[Gregor Kofler]

Hvid Hat meinte:

Hello

How can I display the coordinates when moving mouse over an image? I
want the image coordinates.

Get the mouse position, calculate the absolute position of your image
(or whichever element), subtract.

And another question. How how can I draw a horizontal line on the y
coordinate of mouse?

What do you mean by "horizontal line"? There are no "lines" in a HTML
document. You can place an absolutely positioned DIV (with a given
height and width) at the current Y mouse position.

Gregor

 

[Hvid Hat]

Hello Thomas,

Bart Van der Donck wrote:

Utter nonsense. It is quite obvious that the OP does not want the
image absolutely positioned, and that they are interested in the
coordinates of the cursor of the pointing device, relative to either
the screen, the viewport, or the image. This has been answered
before.

Sorry if I'm not making myself clear :-/ If the mouse is over the image,
I want the coordinates within the image. So if the cursor is 10 pixels from
the left and top of the image, I want the coordinates to be x, y = 10, 10.

I've spend a good amount of time searching google and google groups before
asking here but I couldn't find anything useful. Maybe I'm just not good
at searching so perhaps you could help me out?

Thanks

 

[Joost Diepenmaat]

Sorry if I'm not making myself clear :-/ If the mouse is over the
image, I want the coordinates within the image. So if the cursor is 10
pixels from the left and top of the image, I want the coordinates to
be x, y = 10, 10.

You have to do some of the work yourself, since there isn't a single
standard and reliable way of getting at this info. Basically, what you
need to find out is

1. the position of your image relative to the (top left of) the page.
2. the position of your mouse relative to the page.

Then you can subtract the results of 2 from 1.

For 1, http://www.quirksmode.org/js/findpos.html

For 2, http://www.quirksmode.org/js/events_properties.html

I think that the code is incorrect if your image is inside one or more
scrolling elements, but at least it should give you a reasonable start.

 

[Nick Fletcher]

You have to do some of the work yourself, since there isn't a single
standard and reliable way of getting at this info. Basically, what you
need to find out is

1. the position of your image relative to the (top left of) the page.
2. the position of your mouse relative to the page.

Then you can subtract the results of 2 from 1.

For 1,http://www.quirksmode.org/js/findpos.html

For 2,http://www.quirksmode.org/js/events_properties.html

I think that the code is incorrect if your image is inside one or more
scrolling elements, but at least it should give you a reasonable start.

Thank you for providing a good answer Joost. It seems like some
regulars in this newsgroup would rather be pompous jerks than actually
spend the time to help people (which I thought was the whole point of
comp.lang.javascript).