Javascript coordinates

by 5 replies
7
I have a very complicated problem: i have an image map and i want to create a javascript code to get the map element name from the given x and y coordinates
e.g.: x=230 ,y=180 and this point is in the map element with the name : somename

any ideas how i can do this ?
#programming #coordinates #javascript
  • Within each map area, you can have javascript events including onMouseOver and OnMouseOut. The browser's JavaScript engine will automatically run that event code whenever the user moves the mouse in or out of an area.

    Here's an example which triggers zooming into an image depending where you point at the image: So You Want An Imagemap Image Flip, Huh? - www.htmlgoodies.com And here's a more detailed description of the available JavaScript events: JavaScript Image Maps.

    Chris
    • [1] reply
  • So i have an image with a html imagemap (50 pieces) and i have above the image 2 text inputs , one for x coordinate and one for y. When somebody tipes in some numbers in the 2 fields eg: x=30 y=60 and i want that the script to write out the name of the piece from x=3 and y=60 coordinates in a third text input
    • [1] reply
    • Simple.

      Here's an example - it updates a div, not a textbox but this is easy to change.
      This uses the prototype library, make sure you reference it accordingly.
      ------------------------------------------
      <html>
      <head>
      <title>test</title>
      <!--- Your path to prototype --->
      <script src="/scripts/prototype.js" type="text/javascript"></script>

      <script type="text/javascript">
      function ajaxUpdater() {
      new Ajax.Updater(,{method:'post',
      parameters: Form.serialize($('')),
      });
      }
      </script>

      </head>
      <body>

      <!--- Your form --->
      <form method="post" id="">
      <input type="text" name="xcoord"> <input type="text" name="ycoord">
      <input type="button" name="submitreq" value="Get name" onClick="ajaxUpdater('','')">

      <!--- This is where the output is updated - see the name above --->
      <div id="">
      &nbsp;
      </div>
      </form>

      </body>
      </html>

      ------------------------------------------

      ------------------------------------------
      <?php
      # This is jsut an example. You should check the POST variables contain numbers within a certain
      # range and the usual checks. Then, assuming your data is in a database, read them in with
      # SELECT mapname FROM yourtable WHERE xcoord = (the posted value) and ycoord = (the posted value)

      # When you have it, just print the value out and it will update your textbox.

      print "hello world";
      print_r($_POST);
      ?>

      ------------------------------------------

      The syntax above should be fairly straight forward, feel free to PM for clarification.
      There's plenty of other ways to do this - this is just one example

      EDIT: This requires to user to hit submit, but its trivial to check if both of the xcoord and ycoord
      values have been set and only then update the div with the required name.
  • thank chaos
    looks helpful
Join the discussion

Next Topics on Trending Feed

  • 7

    Javascript coordinates

    I have a very complicated problem: i have an image map and i want to create a javascript code to get the map element name from the given x and y coordinates e.g.: x=230 ,y=180 and this point is in the map element with the name : somename