How to get X,Y coord's like "ismap" ?

M

Martin

For use in IE only:

I need to make some calculations (in a client-side script) based on
the X,Y coordinates of the mouse pointer when the user clicks on an
image. I want the coordinates to be screen-resolution independent.

The image tag's "ismap" generates exactly the numbers I'm looking for
but I can't figure out how to capture them. "ismap" seems to work only
when used in conjunction with an "href" and a new page is
automatically requested. Is there a way to grab those numbers without
requesting a new page?

Alternatively, can someone tell me how to generate the equivalent
numbers?

I've tried looking at just about every X and Y related property on the
"image" and "event" objects but I can't seem to duplicate the "ismap"
numbers.

Any thoughts?

Thanks
 
E

Evertjan.

Martin wrote on 21 aug 2004 in comp.lang.javascript:
For use in IE only:

I need to make some calculations (in a client-side script) based on
the X,Y coordinates of the mouse pointer when the user clicks on an
image. I want the coordinates to be screen-resolution independent.

The image tag's "ismap" generates exactly the numbers I'm looking for
but I can't figure out how to capture them. "ismap" seems to work only
when used in conjunction with an "href" and a new page is
automatically requested. Is there a way to grab those numbers without
requesting a new page?

Alternatively, can someone tell me how to generate the equivalent
numbers?

I've tried looking at just about every X and Y related property on the
"image" and "event" objects but I can't seem to duplicate the "ismap"
numbers.
Click to expand...

Googling gives many examples:

<html>
<script type="text/JavaScript">
document.onmousemove = doit;
function doit() {
X = event.x + document.body.scrollLeft - 2;
Y = event.y + document.body.scrollTop - 2;
window.status=
"Coordinates of the pointer: x = " + X + " ; y = " + Y;
}
</script>
Mouse coordinates are shown on the statusbar.
</html>
 
M

Martin

Googling gives many examples:

<html>
<script type="text/JavaScript">
document.onmousemove = doit;
function doit() {
X = event.x + document.body.scrollLeft - 2;
Y = event.y + document.body.scrollTop - 2;
window.status=
"Coordinates of the pointer: x = " + X + " ; y = " + Y;
}
</script>
Mouse coordinates are shown on the statusbar.
</html>
Click to expand...

Thanks for the reply. In fact, I'm already using that code for some
other purposes.

But it does not yield the numbers I'm looking for; it returns the
mouse pointer's screen coordinates. And, the actual numbers returned
are dependent on the screen resolution.

I'm looking for something that tells me where the pointer is <in the
image> AND, will return the same values no matter what the display
resolution is.

Any other thoughts?
 
M

Martin

Thanks for the reply. In fact, I'm already using that code for some
other purposes.

But it does not yield the numbers I'm looking for; it returns the
mouse pointer's screen coordinates. And, the actual numbers returned
are dependent on the screen resolution.

I'm looking for something that tells me where the pointer is <in the
image> AND, will return the same values no matter what the display
resolution is.

Any other thoughts?
Click to expand...

Oops...

Pardon me for a moment while I pull my head out of my ass. :(

I went back and took another look at function I had (that you
provided) and found that it does, in fact, provide the same numbers at
differing resolutions. What I was failing to do was to properly
account for the offsets (to the centered image) that are generated at
different resolutions. When I calculate things correctly, I get the
numbers I wanted.
 
H

Harag

Oops...

Pardon me for a moment while I pull my head out of my ass. :(

I went back and took another look at function I had (that you
provided) and found that it does, in fact, provide the same numbers at
differing resolutions. What I was failing to do was to properly
account for the offsets (to the centered image) that are generated at
different resolutions. When I calculate things correctly, I get the
numbers I wanted.
Click to expand...


Hi there,

I'm very interested in how to do this as well. I have a "map" image
and I want the users to click on the image and depending on the X,Y
location they clicked on I want to have a popup that access the DB
with the X.Y location and return the info. (the db has X,Y locations
stored and will compare the ones passed to the ones stored.

At the moment the only method I have thought of is by using a form.


function CityInfoWindow() {
NewWindow ('', 'CityInfo', 600, 400, 'yes', 'yes', -1, -1,
'');

<form name="frmCity" method="post" action="CityInfo.asp"
target="CityInfo">
<input type="image" src="CityMap.gif" name="coords"
onClick="CityInfoWindow();">
</form>

I need the top left of the Image to be starting at 0,0 and for the
Javascript code to work in both IE 5.5+ and NS 7 at least.


Thanks for any help

Al.
 
M

Martin

Hi there,

I'm very interested in how to do this as well. I have a "map" image
and I want the users to click on the image and depending on the X,Y
location they clicked on I want to have a popup that access the DB
with the X.Y location and return the info. (the db has X,Y locations
stored and will compare the ones passed to the ones stored.

At the moment the only method I have thought of is by using a form.


function CityInfoWindow() {
NewWindow ('', 'CityInfo', 600, 400, 'yes', 'yes', -1, -1,
'');

<form name="frmCity" method="post" action="CityInfo.asp"
target="CityInfo">
<input type="image" src="CityMap.gif" name="coords"
onClick="CityInfoWindow();">
</form>

I need the top left of the Image to be starting at 0,0 and for the
Javascript code to work in both IE 5.5+ and NS 7 at least.


Thanks for any help

Al.
Click to expand...

Here's the code I ended up using to generate the x,y coordinates:

x=event.clientX + window.document.body.scrollLeft -
document.images[0].offsetLeft - 2;

y=event.clientY + window.document.body.scrollTop -
document.images[0].offsetTop- 2;

I'm writing strictly for the IE browser. I know you'll have to use
different code to capture the "event.clientX" and "event.clientY"
values in NS.

Good luck.
 
M

Martin

Thanks for any help

Al.
Click to expand...

I've been working on this some more and have discovered that the
".offsetTop" property seems to always be "0" even though the image is
not at the top of the page. Apparently, the offset is measured from
the top of the "parent" object. In my case, I have the image in a
<DIV> tag so, I had to get that value. I don't know if it's the best
way but instead of "document.images[0].offsetTop", I used
"document.images[0].offsetParent.offsetTop"

This seems to yield a constant value - even at different screen
resolutions, it's always the same number.

HTH
 
E

Evertjan.

Martin wrote on 22 aug 2004 in comp.lang.javascript:
I've been working on this some more and have discovered that the
".offsetTop" property seems to always be "0" even though the image is
not at the top of the page. Apparently, the offset is measured from
the top of the "parent" object. In my case, I have the image in a
<DIV> tag so, I had to get that value. I don't know if it's the best
way but instead of "document.images[0].offsetTop", I used
"document.images[0].offsetParent.offsetTop"

This seems to yield a constant value - even at different screen
resolutions, it's always the same number.
Click to expand...

offsetTop belongs to a style="position:absolute;" object

Do not use offsetTop with a object [like <div>]
that is not absolute positioned in it's container.
 
R

Richard Cornford

Martin wrote:
Here's the code I ended up using to generate the x,y coordinates:

x=event.clientX + window.document.body.scrollLeft -
document.images[0].offsetLeft - 2;

y=event.clientY + window.document.body.scrollTop -
document.images[0].offsetTop- 2;

I'm writing strictly for the IE browser. I know you'll have to use
different code to capture the "event.clientX" and "event.clientY"
values in NS.
Click to expand...

IE browser mouse event objects have - offsetX/Y - properties that may be
a more direct way of achieving your goal (they are not well supported on
other browsers).

However, An element's total offset into a page is more complex than
just - document.images[0].offsetTop - because that represents the offset
to the element's - offsetParent -. When the element is not a direct
child of the BODY its - offsetTop/Left - may not be its page offset (CSS
absolute positioning also influences offset values).

Position information is available (where supported, as not all browsers
provide this info) by summing the - offsetTop/Left - values for each
element with all of its offset parent elements - offsetTop/Left - values
and then its offset parent's, until one of those elements has its -
offsetParent - property set to - null -. At least that is in the
simplest case; element's with borders and CSS overflow set so that they
scroll, add additional complexity to the calculations).

The constant value that you are using - 2 - is compensating for the -
clientTop/Left - property of the document.body element (on IE <= 5.5 and
IE 6 in "BackCompat" mode) and represents a default 2px inset border on
the root element. In principle that number is only the default and it is
possible for users to modify the border width on the root element (or
even a page designer through a CSS assignment). It would probably be
better to actually read the - document.body.clientTop/Left - property to
acquire that number as then it will always represent the user's real
configuration.

On IE 6 it is possible to put the browser into "standards"
('CSS1Compat') mode, and if that happens the - scrollTop/Left - values
and the - clientTop/Left - values that apply to the root element are not
available from - document.body - but should instead be read from -
document.documentElement -. If there is a chance that the script will be
used in more than one context, or that the HTML design may at some point
change to be formally valid, it would be a good idea to be deciding
which of - document.body - or - document.documentElement - should be
read by checking the string value available from - docuemnt.compatMode -
(which doesn't exist on IE <= 5.5). Archive searching for
"document.compatMode" will turn up many examples and approaches.

Richard.
 
M

Martin

On Sun, 22 Aug 2004 19:53:07 +0100, "Richard Cornford"

snip...

Richard - Thanks for the explanation. I've learned a lot.

One thing I've learned, though, is that this is becoming more
complicated than it's worth (for my particular application).

As I mentioned at the top of this thread (I think), the "ismap"
function of an image gives me exactly the x/y coordinates that I'm
looking for. Do you (or anyone else) know if there's any way to
capture those values inside a script? They show up in the status
window only if an associated "href" has been specified but I'm
wondering if they're being generated by just declaring "ismap".

Any thoughts?

Thanks again.
 
G

Geir Klemetsen

Martin said:
For use in IE only:

I need to make some calculations (in a client-side script) based on
the X,Y coordinates of the mouse pointer when the user clicks on an
image. I want the coordinates to be screen-resolution independent.

The image tag's "ismap" generates exactly the numbers I'm looking for
but I can't figure out how to capture them. "ismap" seems to work only
when used in conjunction with an "href" and a new page is
automatically requested. Is there a way to grab those numbers without
requesting a new page?

Alternatively, can someone tell me how to generate the equivalent
numbers?

I've tried looking at just about every X and Y related property on the
"image" and "event" objects but I can't seem to duplicate the "ismap"
numbers.

Any thoughts?
Click to expand...

This works for me (IE50)


<html>
<body>

<p align="center">
<img src="img.jpg"
width="150" height="150"
onclick="klikk();"
onmouseout="statusReset();">
</p>


<script language=javascript>

var iX=0, iY=0;

status = "Position unknown";

function klikk() {
iX = window.event.offsetX;
iY = window.event.offsetY;
status = "Position is: " + iX + ", " + iY;
}

function statusReset() {
status = "Position unknown";
}

</script>

</body>
 
M

Martin

This works for me (IE50)


<html>
<body>

<p align="center">
<img src="img.jpg"
width="150" height="150"
onclick="klikk();"
onmouseout="statusReset();">
</p>


<script language=javascript>

var iX=0, iY=0;

status = "Position unknown";

function klikk() {
iX = window.event.offsetX;
iY = window.event.offsetY;
status = "Position is: " + iX + ", " + iY;
}

function statusReset() {
status = "Position unknown";
}

</script>

</body>
</html>
Click to expand...

Wow! Yes, that does seem to do the job. And it's so simple.

Thanks
 
H

Harag

Wow! Yes, that does seem to do the job. And it's so simple.

Thanks
Click to expand...


But its IE only... for me I need to have it working in NS 7 at least.

My only solution so far is the code below. If anyone can spot any
(potential) problems with it then please let me know. it basically
Opens up a new window and posts the form to a file there
(CityInfo.asp) which then determins the X,Y coords and access the DB
accordingly. This is working well as every pixel on the CityMap is a
location (or areas of location) Though it might not work so well in
maps that don't have "clickable" locations... But I'm looking at
creating the ISMAP html in the page creation for that.

Thanks

Al

function CityInfoWindow() {
NewWindow ('', 'CityInfo', 600, 400, 'yes', 'yes', -1, -1,
'');

<form name="frmCity" method="post" action="CityInfo.asp"
target="CityInfo">
<input type="image" src="CityMap.gif" name="coords"
onClick="CityInfoWindow();">
</form>
 

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

Similar Threads

Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
How to move an image in HTML/CSS using x/y coordinates? 1
How to align two y-axes when using the range parameter? 1
Finding new coordinates of x and y for image(s) 2
using Javascript with an ISMAP tag 0
How to Use OOPS instead of displaying to the window in a list 0
How to draw shapes by using mouse 1
How To Do IN OOPS instead of displaying Trees in a list 1

Members online

Total: 38 (members: 2, guests: 36)
Robots: 634

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top