Javascript DOM HTML Area shape Property get

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

Get the shape of a specific area in an image-map: 

var x = document.getElementById("myArea").shape;

Click the button to return the shape of the myArea area in the image-map.

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. ja v  a2  s . c  o  m*/

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

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

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

</body>
</html>



PreviousNext

Related