Javascript DOM HTML Area coords Property set

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.

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

document.getElementById("myArea").coords = "90, 58, 3";

The coordinates 50,50,40 set region for circle shape to be clickable.

Click the button to change 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  2s  .co m*/

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

<script>
function myFunction() {
  document.getElementById("myArea").coords = "90,58,5";
  document.getElementById("demo").innerHTML = "The coordinate values was changed.";
}
</script>

</body>
</html>



PreviousNext

Related