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

Discussion in 'Javascript' started by Martin, Aug 21, 2004.

  1. Martin

    Martin Guest

    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
     
    Martin, Aug 21, 2004
    #1
    1. Advertising

  2. Martin

    Evertjan. Guest

    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.


    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>


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Aug 21, 2004
    #2
    1. Advertising

  3. Martin

    Martin Guest

    On 21 Aug 2004 22:13:09 GMT, "Evertjan."
    <> wrote:

    >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>


    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, Aug 21, 2004
    #3
  4. Martin

    Martin Guest

    On Sat, 21 Aug 2004 15:36:01 -0700, Martin <>
    wrote:

    >On 21 Aug 2004 22:13:09 GMT, "Evertjan."
    ><> wrote:
    >
    >>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>

    >
    >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?
    >


    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.
     
    Martin, Aug 22, 2004
    #4
  5. Martin

    Harag Guest

    On Sat, 21 Aug 2004 16:07:40 -0700, Martin <>
    wrote:

    >On Sat, 21 Aug 2004 15:36:01 -0700, Martin <>
    >wrote:
    >
    >>On 21 Aug 2004 22:13:09 GMT, "Evertjan."
    >><> wrote:
    >>
    >>>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>

    >>
    >>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?
    >>

    >
    >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.
    >



    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.
     
    Harag, Aug 22, 2004
    #5
  6. Martin

    Martin Guest

    On Sun, 22 Aug 2004 12:00:39 +0100, Harag
    <> wrote:

    >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.


    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.
     
    Martin, Aug 22, 2004
    #6
  7. Martin

    Martin Guest

    On Sun, 22 Aug 2004 12:00:39 +0100, Harag
    <> wrote:

    >
    >Thanks for any help
    >
    >Al.


    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
     
    Martin, Aug 22, 2004
    #7
  8. Martin

    Evertjan. Guest

    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.


    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)
     
    Evertjan., Aug 22, 2004
    #8
  9. Martin wrote:
    <snip>
    > 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.


    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.
     
    Richard Cornford, Aug 22, 2004
    #9
  10. Martin

    Martin Guest

    On Sun, 22 Aug 2004 19:53:07 +0100, "Richard Cornford"
    <> 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.
     
    Martin, Aug 22, 2004
    #10
  11. "Martin" <> skrev i melding
    news:...
    > 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?


    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>


    > Thanks
     
    Geir Klemetsen, Aug 22, 2004
    #11
  12. Martin

    Martin Guest

    On Mon, 23 Aug 2004 00:47:24 +0200, "Geir Klemetsen"
    <> wrote:

    >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>


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

    Thanks
     
    Martin, Aug 23, 2004
    #12
  13. Martin

    Harag Guest

    On Sun, 22 Aug 2004 16:40:24 -0700, Martin <>
    wrote:

    >On Mon, 23 Aug 2004 00:47:24 +0200, "Geir Klemetsen"
    ><> wrote:
    >
    >>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>

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



    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>
     
    Harag, Aug 23, 2004
    #13
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alex
    Replies:
    0
    Views:
    424
  2. Richard

    ismap new window not wanted

    Richard, Dec 26, 2003, in forum: HTML
    Replies:
    2
    Views:
    409
    Richard
    Dec 26, 2003
  3. Patrick Kowalzick
    Replies:
    5
    Views:
    512
    Patrick Kowalzick
    Mar 14, 2006
  4. optimistx

    minimum x-coord of an image when clicked

    optimistx, Feb 1, 2005, in forum: Javascript
    Replies:
    2
    Views:
    98
    optimistx
    Feb 1, 2005
  5. Andy Fish

    using Javascript with an ISMAP tag

    Andy Fish, Sep 15, 2005, in forum: Javascript
    Replies:
    0
    Views:
    94
    Andy Fish
    Sep 15, 2005
Loading...

Share This Page