Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Area Object
  • Last Updated : 20 Feb, 2019

The Area Object property in HTML DOM is used to create and access the <area> element with in the object. For example, making the area of image clickable and access other data through that which can be used further in map or other object.

Syntax:

  • It is used to access a <area> element.
    var x = document.getElementById("myArea");
  • It is used to create a <area> element.
    var x = document.createElement("AREA");

Property Values:

ValueDescription
altIt is used to set or return the value of the alt attribute of an area.
coordsIt is used to set or return the value of the coords attribute of an area.
hashIt is used to set or return the anchor part of the href attribute value.
hostIt is used to set or return the hostname and port part of the href attribute value.
hostnameIt is used to set or return the hostname part of the href attribute value.
hrefIt is used to set or return the value of the href attribute of an area.
noHrefIt is used to set or return the value of the nohref attribute of an area.
originIt is used to returns the protocol, hostname and port part of the href attribute value.
passwordIt is used to set or return the password part of the href attribute value.
pathnameIt is used to set or return the pathname part of the href attribute value.
portIt is used to set or return the port part of the href attribute value.
protocolIt is used to set or return the protocol part of the href attribute value.
searchIt is used to set or return the querystring part of the href attribute value.
shapeIt is used to set or return the value of the shape attribute of an area.
targetIt is used to set or return the value of the target attribute of an area.
usernameIt is used to set or return the username part of the href attribute value.

Example-1: Return href attribute of clickable image.




<!DOCTYPE html>
<html>
<title>
    HTML DOM Area Object Property
</title>
  
<body>
    <h4>Click the button</h4>
    <button onclick="GFG()">Click Here!
        <br>
    </button>
    <map name="Geeks1">
        <area id="Geeks"
              shape="rect"
              coords="0, 0, 110, 100"
              alt="Geeks"
              href=
    </map>
  
    <img src=
         width="300" 
         height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    
    <p id="GEEK!"></p>
    
    <script>
        function GFG() {
            
            //  Return href attribute.
            var x = 
            document.getElementById("Geeks").href;
            
            document.getElementById(
            "GEEK!").innerHTML = x;
        }
    </script>
</body>
  
</html>

Output:



Example-2: Creating area element and set href attribute.




<!DOCTYPE html>
<html>
<title>
    HTML DOM Area Object Property
</title>
  
<body>
    <h4>Click the button</h4>
    <button onclick="GFG()">Click Here!
        <br>
    </button>
    <p></p>
    <img src=
         width="300"
         height="100" 
         usemap="#planetmap">
    
    <map id="myMap" name="planetmap">
    </map>
    
    <p id="GEEK!"></p>
  
    <script>
        function GFG() {
            
            // creating area element using 
            // document.createElement("AREA");
            var y = document.createElement("AREA");
            y.setAttribute("href",
            y.setAttribute("shape", "rect");
            y.setAttribute("coords", "190, 0, 300, 100");
            document.getElementById("myMap").appendChild(y);
  
            document.getElementById("GEEK!").innerHTML =
                "Click on the GEEKS area in the image.";
        }
    </script>
</body>
  
</html>

Output:

Steps to execute the above code:

  • Save the file
  • Execute on an standard browser.

Supported Browsers: The browser supported by DOM Area Object property are listed below:

  • Google Chrome 5.0
  • Internet Explorer 8.0
  • Firefox 3.6
  • Safari 5.0
  • Opera 10.6



My Personal Notes arrow_drop_up
Recommended Articles
Page :