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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Jun, 2023
Like Article
Save Article