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

**Evertjan.** · Jul 23 '05, 01:11 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

Martin wrote on 21 aug 2004 in comp.lang.javas cript:[color=blue]
> 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.[/color]

Googling gives many examples:

<html>
<script type="text/JavaScript">
document.onmous emove = doit;
function doit() {
X = event.x + document.body.s crollLeft - 2;
Y = event.y + document.body.s crollTop - 2;
window.status=
"Coordinate s of the pointer: x = " + X + " ; y = " + Y;
}
</script>
Mouse coordinates are shown on the statusbar.
</html>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

**Martin** · Jul 23 '05, 01:11 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

On 21 Aug 2004 22:13:09 GMT, "Evertjan."
<exjxw.hannivoo rt@interxnl.net > wrote:
[color=blue]
>Googling gives many examples:
>
><html>
><script type="text/JavaScript">
>document.onmou semove = doit;
>function doit() {
> X = event.x + document.body.s crollLeft - 2;
> Y = event.y + document.body.s crollTop - 2;
> window.status=
> "Coordinate s of the pointer: x = " + X + " ; y = " + Y;
>}
></script>
>Mouse coordinates are shown on the statusbar.
></html>[/color]

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?

**Martin** · Jul 23 '05, 01:11 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

On Sat, 21 Aug 2004 15:36:01 -0700, Martin <martinvalley@c omcast.net>
wrote:
[color=blue]
>On 21 Aug 2004 22:13:09 GMT, "Evertjan."
><exjxw.hannivo ort@interxnl.ne t> wrote:
>[color=green]
>>Googling gives many examples:
>>
>><html>
>><script type="text/JavaScript">
>>document.onmo usemove = doit;
>>function doit() {
>> X = event.x + document.body.s crollLeft - 2;
>> Y = event.y + document.body.s crollTop - 2;
>> window.status=
>> "Coordinate s of the pointer: x = " + X + " ; y = " + Y;
>>}
>></script>
>>Mouse coordinates are shown on the statusbar.
>></html>[/color]
>
>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?
>[/color]

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.

**Harag** · Jul 23 '05, 01:12 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

On Sat, 21 Aug 2004 16:07:40 -0700, Martin <martinvalley@c omcast.net>
wrote:
[color=blue]
>On Sat, 21 Aug 2004 15:36:01 -0700, Martin <martinvalley@c omcast.net>
>wrote:
>[color=green]
>>On 21 Aug 2004 22:13:09 GMT, "Evertjan."
>><exjxw.hanniv oort@interxnl.n et> wrote:
>>[color=darkred]
>>>Googling gives many examples:
>>>
>>><html>
>>><script type="text/JavaScript">
>>>document.onm ousemove = doit;
>>>function doit() {
>>> X = event.x + document.body.s crollLeft - 2;
>>> Y = event.y + document.body.s crollTop - 2;
>>> window.status=
>>> "Coordinate s of the pointer: x = " + X + " ; y = " + Y;
>>>}
>>></script>
>>>Mouse coordinates are shown on the statusbar.
>>></html>[/color]
>>
>>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?
>>[/color]
>
>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.
>[/color]

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="CityInf o.asp"
target="CityInf o">
<input type="image" src="CityMap.gi f" name="coords"
onClick="CityIn foWindow();">
</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.

**Martin** · Jul 23 '05, 01:12 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

On Sun, 22 Aug 2004 12:00:39 +0100, Harag
<haragREMOVETHE SECAPITALS@soft home.net> wrote:
[color=blue]
>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="CityInf o.asp"
>target="CityIn fo">
> <input type="image" src="CityMap.gi f" name="coords"
>onClick="CityI nfoWindow();">
></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.[/color]

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

x=event.clientX + window.document .body.scrollLef t -
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.clie ntX" and "event.clie ntY"
values in NS.

Good luck.

**Martin** · Jul 23 '05, 01:12 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

On Sun, 22 Aug 2004 12:00:39 +0100, Harag
<haragREMOVETHE SECAPITALS@soft home.net> wrote:
[color=blue]
>
>Thanks for any help
>
>Al.[/color]

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.image s[0].offsetTop", I used
"document.image s[0].offsetParent.o ffsetTop"

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

HTH

**Evertjan.** · Jul 23 '05, 01:12 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

Martin wrote on 22 aug 2004 in comp.lang.javas cript:[color=blue]
> 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.image s[0].offsetTop", I used
> "document.image s[0].offsetParent.o ffsetTop"
>
> This seems to yield a constant value - even at different screen
> resolutions, it's always the same number.[/color]

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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

**Richard Cornford** · Jul 23 '05, 01:12 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

Martin wrote:
<snip>[color=blue]
> Here's the code I ended up using to generate the x,y coordinates:
>
> x=event.clientX + window.document .body.scrollLef t -
> 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.clie ntX" and "event.clie ntY"
> values in NS.[/color]

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.c lientTop/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.docume ntElement -. 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.docume ntElement - should be
read by checking the string value available from - docuemnt.compat Mode -
(which doesn't exist on IE <= 5.5). Archive searching for
"document.compa tMode" will turn up many examples and approaches.

Richard.

**Martin** · Jul 23 '05, 01:12 PM

Re: How to get X,Y coord's like "ismap&quo t; ?

On Sun, 22 Aug 2004 19:53:07 +0100, "Richard Cornford"
<Richard@litote s.demon.co.uk> wrote:

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.

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment