Progress Monitor for IdealProgrammer.com

Take Swift, Intelligent, Massive, Planned, Loving, Effective (S.I.M.P.L.E.) Action to Transform Self into Ideal

Skip Repetitive Navigational Links

Home

News

Presenters

Contact

Please login

coords Example JavaScript (JS)

Description: Illustrates the JavaScript syntax for the Anchor Object coords Property .

Syntax: object.coords=coords – Allows you to retrieve or assign coords for links in an image map.

coords Example JavaScript (JS) Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: coords</title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
    -->
   </head>
  <body>
  <a href="http://idealprogrammer.com">Ideal Programmer</a><br /><br />
<img src ="http://idealprogrammer.com/wp-photos/goldbottle.jpg" width="200" height="200" alt="Planets"
usemap ="#goldmap" /><br /> <br />
 
<map name="goldmap" id="goldmapid">
<area id="accessKey" shape="rect" coords="0,0,100,100" href="accessKey.htm" alt="accessKey" />
<area id="charset" shape="rect" coords="100,0,200,100" href="charset.htm" alt="charset" />
 
</map>
<script type="text/javascript">
 
    //*****************************************************
    // DOM Objects
    //*****************************************************
 
 
    //*****************************************************
    //    ***    Anchor Object Property   ***
    //*****************************************************
 
    //*****************************************************
    // coords
    //*****************************************************
 
    //    SYNTAX:
    //    anchorObject.coords=coordinates  Allows you to access a comma-separated list
    //               of a link in an image map.
 
    // Two ways to retrieve coords   
    //   1. GetElementsByTagName
    myObject = document.getElementsByTagName('area')[0];
    document.write("accessKey - Using getElementsByTagName : " + myObject.coords);
    document.write("<br />");
    //   2. GetElementById
    document.write("charset - Using getElementById: ");
    document.write(document.getElementById('charset').coords);
 
    document.write("<br /><br />");
    // Two ways to assign coords
 
    //   1. GetElementById
    myFirstLink = document.getElementById('accessKey');
    myFirstLink.coords = "0,0,90,90";
    document.write("<br />accessKey charset changed to 0,0,90,90: ", myFirstLink.coords);
 
    //   2. GetElementsByTagName      
    mySecondLink = document.getElementsByTagName('area')[1];
    mySecondLink.coords = "105,5,200,100";
    document.write("<br />charset changed to 105,5,200,100: ", mySecondLink.coords)
 
 
</script>
 
 
  </body>
</html>