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:

Value	Description
alt	It is used to set or return the value of the alt attribute of an area.
coords	It is used to set or return the value of the coords attribute of an area.
hash	It is used to set or return the anchor part of the href attribute value.
host	It is used to set or return the hostname and port part of the href attribute value.
hostname	It is used to set or return the hostname part of the href attribute value.
href	It is used to set or return the value of the href attribute of an area.
noHref	It is used to set or return the value of the nohref attribute of an area.
origin	It is used to returns the protocol, hostname and port part of the href attribute value.
password	It is used to set or return the password part of the href attribute value.
pathname	It is used to set or return the pathname part of the href attribute value.
port	It is used to set or return the port part of the href attribute value.
protocol	It is used to set or return the protocol part of the href attribute value.
search	It is used to set or return the querystring part of the href attribute value.
shape	It is used to set or return the value of the shape attribute of an area.
target	It is used to set or return the value of the target attribute of an area.
username	It 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= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-21.png"> 
    </map> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png" 
         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= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
         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", 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-24.png"); 
            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> 