Javascript Reference - HTML DOM Area shape Property

The shape attribute together with the coords attribute to specify the size, shape, and placement of an area.

The shape property sets or gets the value of the shape attribute of an area.

Browser Support


`shape`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the shape property:

var v = areaObject.shape

Set the shape property:

areaObject.shape='default|rect|circle|poly';

Property Values

Value	Description
default	entire region
rect	rectangular region
circle	circular region
poly	polygonal region

Return Value

A String representing the shape type of the area.

Example

The following code shows how to change the shape for a specific area in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--from  www  .j  av a 2s.com-->
<img src="http://java2s.com/style/demo/border.png" 
width="145" height="126" usemap="#myImageMap">

<map name="myImageMap">
  <area id="myArea" shape="circle" coords="124,58,8" 
  alt="myImage" href="http://example.com">
</map>

<p id="demo"></p>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myArea").shape = "default";
    document.getElementById("demo").innerHTML = "changed";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the shape of a specific area in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--  w w w  .j  a  va2  s  . c  o  m-->
<img src="http://java2s.com/style/demo/border.png" width="145" 
height="126" usemap="#myImageMap">

<map name="myImageMap">
  <area id="myArea" shape="circle" coords="124,58,8" 
  alt="myImage" href="http://example.com">
</map>

<p id="demo"></p>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.getElementById("myArea").shape;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows: