HTML | DOM Area shape Property

Last Updated : 06 Sep, 2019

The Area shape Property in HTML DOM is used to set or return the value of the shape attribute. It is used to define the shape of the area. It is used with coords attribute to define the shape, size etc.

Syntax:

It return the Area shape property.
```
 areaObject.shape
```

It is used to set the Area shape property.

areaObject.shape = default|rect|circle|poly

Property Values: It contains single value shape which specify the type of shape.

default: It is used to specify the entire region.
rect: It is used to specify the rectangular region.
circle: It is used to specify a circular region.
poly: It is used to specify the polygonal region.

Return Value: It returns a string value which represents the shape of the area.

Example 1: This example returns the Area shape Property.

<!DOCTYPE html> 
<html> 
<title> 
    HTML DOM Area shape Property 
</title> 
  
<body> 
    <h4> HTML DOM Area shape Property </h4> 
    <button onclick="GFG()">Click Here! 
    </button> 
    <map name="Geeks1"> 
        <area id="Geeks"
            shape="rect"
            coords="0, 0, 110, 100"
            alt="Geeks"
            href= 
        https://manaschhabra:manaschhabra499@www.geeksforgeeks.org/
    </map> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        width="300"
        height="100"
        alt="Geeksforgeeks"
        usemap="#Geeks1"> 
    </br>
    <p id="GEEK!"></p> 
      
    <script> 
        function GFG() { 
              
        // Return shape property. 
            var x = document.getElementById("Geeks").shape; 
        document.getElementById("GEEK!").innerHTML = x; 
        } 
    </script> 
</body> 
  
</html>                    

Output:
Before Clicking on Button:

After Clicking on Button:

Example 2: This example sets the Area shape property.

<!DOCTYPE html> 
<html> 
<title> 
    HTML DOM Area shape Property 
</title> 
  
<body> 
    <h4> HTML DOM Area shape Property </h4> 
    <button onclick="GFG()">Click Here! 
    </button> 
    <map name="Geeks1"> 
        <area id="Geeks"
            shape="rect"
            coords="0, 0, 110, 100"
            alt="Geeks"
            href= 
        https://manaschhabra:manaschhabra499@www.geeksforgeeks.org/
    </map> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        width="300"
        height="100"
        alt="Geeksforgeeks"
        usemap="#Geeks1"> 
    </br>
    <p id="GEEK!"></p> 
      
    <script> 
        function GFG() { 
              
        // Set shape property. 
            var x = document.getElementById("Geeks").shape = "circle"; 
        document.getElementById("GEEK!").innerHTML = 
                "The value of shape attribute has been changed to " + x; 
        } 
    </script> 
</body> 
  
</html>                     

Output:
Before Clicking on Button:

After Clicking on Button:

Supported Browsers:

Google Chrome
Firefox
Internet Explorer
Opera
Safari

My Personal Notes

Related Articles