7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Javascript coordinates

by coolboycsaba
5 replies
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 ?
#coordinates #javascript
  • Profile picture of the author Mr. Enthusiastic
    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
    {{ DiscussionBoard.errors[1620499].message }}
  • Profile picture of the author coolboycsaba
    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
    Signature

    TutorialsWindow: The online tutorials database
    A sample page: The best Photoshop tutorials

    {{ DiscussionBoard.errors[1623627].message }}
    • Profile picture of the author chaos69
      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(id,url) {
      new Ajax.Updater(id,url,{method:'post',
      parameters: Form.serialize($('imagemap')),
      });
      }
      </script>

      </head>
      <body>

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

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

      </body>
      </html>

      ------------------------------------------
      getmapname.php
      ------------------------------------------
      <?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.
      Signature
      Best Ways To Make Money Online

      Eight bytes walk into a bar. The bartender asks, “Can I get you anything?”
      “Yeah,” reply the bytes. “Make us a double.”
      {{ DiscussionBoard.errors[1623683].message }}
  • Profile picture of the author coolboycsaba
    thank chaos
    looks helpful
    Signature

    TutorialsWindow: The online tutorials database
    A sample page: The best Photoshop tutorials

    {{ DiscussionBoard.errors[1623704].message }}

Trending Topics