By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,665 Members | 1,952 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,665 IT Pros & Developers. It's quick & easy.

capture mouse position on Image

P: n/a
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 ******************
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
> 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

Jul 23 '05 #2

P: n/a
On Tue, 04 Jan 2005 13:22:45 -0800, Arvin Portlock
<ap********@hotmail.com> wrote:

[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
Jay
Thanks guys!
it worked!!
"Jay" <no@spam.com> wrote in message
news:cr***********@msunews.cl.msu.edu...
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 ******************

Jul 23 '05 #4

P: n/a
DU
Arvin Portlock wrote:
> 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 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
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.3 :)
return {x: x, y: y};
}

Best regards

Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.