Area shapeProperty
Area Object
Definition and Usage
The shape property sets or returns the value of the shape attribute of an area.
The shape property specifies the shape of an area in an image map.
Syntax
areaObject.shape=value
The shape property can have the following values:
| Value | Description |
|---|---|
| default | Specifies the entire area |
| rect | Defines a rectangular region |
| circle | Defines a circular region |
| poly | Defines a polygonal region |
Browser Support
All major browsers support the shape property.
Examples
Examples
The following example returns the shape of the "Venus" area in the image map:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
</head>
<body>
<img src="planets.gif.html" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm.html">
</map>
<p>Shape of the Venus area:
<script>
document.write(document.getElementById("venus").shape);
</script>
</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
</head>
<body>
<img src="planets.gif.html" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm.html">
</map>
<p>Shape of the Venus area:
<script>
document.write(document.getElementById("venus").shape);
</script>
</p>
</body>
</html>
The output of the above example is:
Shape of the Venus area: circle
Try it Yourself »
Area Object Other Extensions