Javascript DOM HTML Area coords Property get

Introduction

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

It works together with the shape attribute to set the placement of an area.

The coordinates of the top-left corner of an area are 0,0.

Property Values for coords attribute:

Value Description
x1, y1, x2, y2 for shape "rect", set the top-left corner and the bottom-right corner of the rectangle
x, y, radius for shape "circle", set the circle center and the radius
x1, y1, x2, y2, .., xn, yn for shape "poly", set the edges of the polygon.

Get the coordinates for a specific area in an image-map: 

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

Click the button to show the coordinates for 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>//from w  w w . j a v a 2  s . c o m

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

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

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

</body>
</html>



PreviousNext

Related