How can I show coordinates relative to an image instead of the browserwindow?

Discussion in 'Javascript' started by M@r(o, Mar 8, 2007.

  1. M@r(o

    M@r(o Guest

    Hi all,

    This is the script I use to find coordinates on a map and transfer
    them to textfields in the openerwindow.
    ++++++++++++++++++++++++
    <HTML>
    <HEAD>
    <TITLE> Mouse Coords </TITLE>
    <script language="JavaScript">
    <!--
    currentX = 0;
    currentY = 0;

    // Netscape 4.x and 6 function
    function markCoords(e) {
    currentX = e.pageX;
    currentY = e.pageY;
    showCoords();
    }
    function fillFields() {
    document.all.menu.style.left = event.clientX;
    document.all.menu.style.top = event.clientY;
    var icoonx = event.clientX - 10;
    var icoony = event.clientY - 10;
    self.opener.document.pf.wooninfopic3.value = icoony
    self.opener.document.pf.wooninfopic2.value = icoonx
    }

    function showCoords() {
    document.all.menu.style.left = event.clientX;
    document.all.menu.style.top = event.clientY;
    var icoonx = event.clientX - 10;
    var icoony = event.clientY - 10;
    document.all.menu.innerHTML = "<table cellpadding=0 cellspacing=0
    border=0><tr><td nowrap bgcolor=white>left: " + icoonx + "<BR>top: " +
    icoony + "</td></tr></table>";
    }

    // Make the browser aware of mouse-action
    // Netscape 4.7
    if (document.layers) {
    document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN);
    document.onmousemove = markCoords;
    // Netscape 6
    } else if (document.getElementById && !document.all) {
    document.addEventListener("mousemove", markCoords, false);
    } else {
    // Asume IE
    document.onmousemove = showCoords;
    }

    //-->
    </script>
    </HEAD>

    <BODY style="background: url('http://www.lelystad.nl/internet/pic/
    20075_achtergrond_licht.jpg');background-repeat: no-repeat; margin:
    0px;">
    <img src="http://www.lelystad.nl/_internet/img/spacer.gif"
    width="713px" height="711px" vspace="0" hspace="0" border="0"
    onClick="fillFields()">
    <div id="menu" style="position:absolute;"></div>

    <layer id="nsLayer" width="100" height="100"></layer>

    </BODY>
    </HTML>
    +++++++++++++++++++++++++
    With this script I need to have a full view of the image to pass the
    coords. But when I want to use a larger map (e.g. 2000x2000px) I have
    to scroll which makes the coords useless because they are relative to
    the border of the browser window.
    I really hope you can help me out.
    TIA

    Marco Hoefman
    M@r(o, Mar 8, 2007
    #1
    1. Advertising

  2. M@r(o

    OmegaJunior Guest

    On Thu, 08 Mar 2007 09:23:49 +0100, M@r(o <> wrote:

    > Hi all,
    >
    > This is the script I use to find coordinates on a map and transfer
    > them to textfields in the openerwindow.
    > ++++++++++++++++++++++++
    > <HTML>
    > <HEAD>
    > <TITLE> Mouse Coords </TITLE>
    > <script language="JavaScript">
    > <!--
    > currentX = 0;
    > currentY = 0;
    >
    > // Netscape 4.x and 6 function
    > function markCoords(e) {
    > currentX = e.pageX;
    > currentY = e.pageY;
    > showCoords();
    > }
    > function fillFields() {
    > document.all.menu.style.left = event.clientX;
    > document.all.menu.style.top = event.clientY;
    > var icoonx = event.clientX - 10;
    > var icoony = event.clientY - 10;
    > self.opener.document.pf.wooninfopic3.value = icoony
    > self.opener.document.pf.wooninfopic2.value = icoonx
    > }
    >
    > function showCoords() {
    > document.all.menu.style.left = event.clientX;
    > document.all.menu.style.top = event.clientY;
    > var icoonx = event.clientX - 10;
    > var icoony = event.clientY - 10;
    > document.all.menu.innerHTML = "<table cellpadding=0 cellspacing=0
    > border=0><tr><td nowrap bgcolor=white>left: " + icoonx + "<BR>top:" +
    > icoony + "</td></tr></table>";
    > }
    >
    > // Make the browser aware of mouse-action
    > // Netscape 4.7
    > if (document.layers) {
    > document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN);
    > document.onmousemove = markCoords;
    > // Netscape 6
    > } else if (document.getElementById && !document.all) {
    > document.addEventListener("mousemove", markCoords, false);
    > } else {
    > // Asume IE
    > document.onmousemove = showCoords;
    > }
    >
    > //-->
    > </script>
    > </HEAD>
    >
    > <BODY style="background: url('http://www.lelystad.nl/internet/pic/
    > 20075_achtergrond_licht.jpg');background-repeat: no-repeat; margin:
    > 0px;">
    > <img src="http://www.lelystad.nl/_internet/img/spacer.gif"
    > width="713px" height="711px" vspace="0" hspace="0" border="0"
    > onClick="fillFields()">
    > <div id="menu" style="position:absolute;"></div>
    >
    > <layer id="nsLayer" width="100" height="100"></layer>
    >
    > </BODY>
    > </HTML>
    > +++++++++++++++++++++++++
    > With this script I need to have a full view of the image to pass the
    > coords. But when I want to use a larger map (e.g. 2000x2000px) I have
    > to scroll which makes the coords useless because they are relative to
    > the border of the browser window.
    > I really hope you can help me out.
    > TIA
    >
    > Marco Hoefman
    >


    You could get rid of the browser-specific scripting and have a scrollable
    map and receive the correct co-ordinates by showing the image on an html
    button control inside a form. If someone clicks the button, the browser
    automatically sends the co-ordinates relative to the button's top left
    (being (0,0)) to the form handler. That form handler could then read the
    co-ordinates from the POST or QUERYSTRING parameters and either push it to
    the opener window, or have it ready for the opener window to pull them
    autonomously.

    --
    Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
    OmegaJunior, Mar 11, 2007
    #2
    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. EMW
    Replies:
    2
    Views:
    322
  2. wai-tak sit
    Replies:
    5
    Views:
    14,094
    Thundergo
    Sep 9, 2006
  3. Suresh  Kumar
    Replies:
    0
    Views:
    579
    Suresh Kumar
    Jul 3, 2003
  4. Suresh  Kumar
    Replies:
    0
    Views:
    507
    Suresh Kumar
    Jul 4, 2003
  5. Gelonida
    Replies:
    0
    Views:
    575
    Gelonida
    Feb 19, 2011
Loading...

Share This Page