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