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

JavaScript (JS) shape Example

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

Syntax: object.shape=RECT|CIRCLE|POLY|DEFAULT – Allows you to retrieve or assign shape for linked objects.

JavaScript (JS) shape Example 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: shape</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="default" coords="100,0,200,100" href="charset.htm" alt="charset" />
 
    </map>
    <script type="text/javascript">
 
        //*****************************************************
        // DOM Objects
        //*****************************************************
 
 
        //*****************************************************
        //    ***    Anchor Object Property   ***
        //*****************************************************
 
        //*****************************************************
        // shape
        //*****************************************************
 
        //    SYNTAX:
        //    anchorObject.shape=RECT|CIRCLE|POLY|DEFAULT  Allows you to access the shape
        //               of a link in an image map.
 
        // Two ways to retrieve shape   
        //   1. GetElementsByTagName
        myObject = document.getElementsByTagName('area')[0];
        document.write("accessKey - Using getElementsByTagName : " + myObject.shape);
        document.write("<br />");
        //   2. GetElementById
        document.write("charset - Using getElementById: ");
        document.write(document.getElementById('charset').shape);
 
        document.write("<br /><br />");
        // Two ways to assign shape
 
        //   1. GetElementById
        myFirstLink = document.getElementById('accessKey');
        myFirstLink.shape = "rect";
        document.write("<br />Shape changed to rect: ", myFirstLink.shape);
 
        //   2. GetElementsByTagName      
        mySecondLink = document.getElementsByTagName('area')[1];
        mySecondLink.shape = "rect";
        document.write("<br />Shape changed to rect: ", mySecondLink.shape)
 
 
    </script>
 
 
      </body>
    </html>