Javascript DOM HTML Area shape Property set

Introduction

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

It specifies the shape of an area in the image map.

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

Property Values are listed as follows:

Value Description
default Specifies the entire region
rectDefines a rectangular region
circle Defines a circular region
polyDefines a polygonal region

Change the shape for a specific area in an image-map: 

document.getElementById("myArea").shape = "default";

Click the button to change the shape of the myArea area in the image-map to "default", which will make the whole image clickable.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<img src="image1.png" width="100" height="100" usemap="#myFlagMap">

<map name="myFlagMap">
  <area id="myArea" 
        shape="circle" 
        coords="50,50,40" 
        alt="Target" 
        href="https://www.java2s.com">
</map>//  w w  w.j  a va2 s . c  o m

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

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

<script>
function myFunction() {
  document.getElementById("myArea").shape = "default";
  document.getElementById("demo").innerHTML = "The shape was changed from 'circle' to 'default'.";
}
</script>

</body>
</html>



PreviousNext

Related