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) target Example

Description: Illustrates the JavaScript syntax for the Area Object target Property .

Syntax: AreaObject.target="target" – Allows you to access the tabbing order for an AreaObject.

JavaScript (JS) target 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: target</title>
        <!-- 
        ***************************************************
        * This example is from http://idealprogrammer.com *
        ***************************************************
        Note:
        coords for rect = "upperleftx,upperlefty,bottomrightx,bottomrighty"
        coords for circle = x,y,r where x and y are center and r is radius
        coords for poly = x1,y1,x2,y2,...
 
        Here is a table of values for target:
    * _blank  - the target URL will open in a new window
    * _self   - the target URL will open in the same frame as it was clicked
    * _parent - the target URL will open in the parent frameset
    * _top    - the target URL will open in the full body of the window
 
        -->
       </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="Area1" shape="rect" target="_blank" coords="0,0,100,100" href="http://www.google.com" alt="google" accesskey="1" />
    <area id="Area2" shape="rect" target="_self" coords="100,0,200,100" href="http://www.yahoo.com" alt="yahoo" accesskey="2" />
    <area id="Area3" shape="rect" target="_parent" coords="0,100,100,200" href="http://idealprogrammer.com" alt="idealprogrammer" accesskey="3" />
    <area id="Area4" shape="rect" target="_top" coords="100,100,200,200" href="http://myqol.com" alt="progressmonitor" accesskey="4" />
 
    </map>
    <script type="text/javascript">
 
        //*****************************************************
        // DOM Objects
        //*****************************************************
 
 
        //*****************************************************
        //    ***    Area Object Property   ***
        //*****************************************************
 
        //*****************************************************
        // target
        //*****************************************************
 
        //    SYNTAX:
        //    areaObject.target="target"  Allows you to access the target
        //               of  an areaObject in an image map. 
 
        // Two ways to retrieve target   
        //   1. GetElementsByTagName
        myObject = document.getElementsByTagName('area')[0];
        document.write("Area1 - Using getElementsByTagName : " + myObject.target);
        document.write("<br />");
        //   2. GetElementById
        document.write("Area2 - Using getElementById: ");
        document.write(document.getElementById('Area2').target);
 
        document.write("<br /><br />");
        // Two ways to assign target
 
        //   1. GetElementById
        myArea3 = document.getElementById('Area3');
        myArea3.target = "_blank";
        document.write("<br />Area3 changed to _blank: ", myArea3.target);
 
        //   2. GetElementsByTagName      
        myArea4 = document.getElementsByTagName('area')[3];
        myArea4.target = "_top";
        document.write("<br />Area4 changed to _top: ", myArea4.target)
 
 
    </script>
 
 
      </body>
    </html>