Open In App

HTML DOM Area shape Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 returns 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 a single value shape which specifies 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 that represents the shape of the area. 

Example 1: This example returns the Area shape Property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area shape Property
    </title>
</head>
 
<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=
    </map>
    <img src=
         width="300" height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    <br>
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
            // Return shape property.
          let x =
            document.getElementById("Geeks").shape;
            document.getElementById("GEEK!").innerHTML = x;
        }
    </script>
</body>
 
</html>


Output: 

 

Example 2: This example sets the Area shape property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area shape Property
    </title>
</head>
 
<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=
    </map>
    <img src=
         width="300" height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    <br>
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
            // Set shape property.
           let x =
            document.getElementById("Geeks").shape = "circle";
            document.getElementById("GEEK!").innerHTML =
                "The value of shape attribute has been changed to " + x;
        }
    </script>
</body>
 
</html>


Output: 

 

Supported Browsers:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari


Last Updated : 23 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads