HTML DOM Area coords Property

Last Updated : 23 Jun, 2023

The Area coords Property in HTML DOM is used to set or return the value of the coords attribute of an area. It specifies the x and y coordinates of an area.

Syntax:

It returns the Area coords property.

 areaObject.coords

It is used to set the Area coords property.

areaObject.coords = value

Property Values:

x1, y1, x2, y2: It specifies the coordinate of top-left (x1, y1) and bottom-right (x2, y2) corner of the rectangle.
x, y, radius: It specifies the center coordinates (x, y) and radius (radius) of circle.
x1, y1, x2, y2, .., xn, yn: It specifies the coordinates of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon.

Return Value: It returns a string value that represents the comma-separated list of coordinates.

Example 1: This example returns the Area coords Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area coords Property
    </title>
</head>
 
<body>
    <h4>HTML DOM Area coords Property</h4>
    <button onclick="GFG()">
          Click Here!
    </button>
    <map name="Geeks1">
        <area id="Geeks" shape="rect"
              coords="0, 0, 110, 100"
              alt="Geeks">
    </map>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
         width="300" height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    <br>
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
            // Return coords property.
           let x = 
            document.getElementById("Geeks").coords;
            document.getElementById("GEEK!").innerHTML = x;
        }
    </script>
</body>
 
</html>

Output:

Example 2: This example sets the Area coords property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area coords Property
    </title>
</head>
 
<body>
    <h4>HTML DOM Area coords Property </h4>
    <button onclick="GFG()">
          Click Here!
    </button>
    <map name="Geeks1">
        <area id="Geeks" shape="rect"
              coords="0, 0, 110, 100"
              alt="Geeks"
              href=
"https://manaschhabra:manaschhabra499@www.geeksforgeeks.org/">
    </map>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
         width="300" height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    <br>
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
            // Sets coords property.
            let x = 
            document.getElementById("Geeks").coords =
                "2, 2, 100, 100";
            document.getElementById("GEEK!").innerHTML =
                "The coords has been changed to " + x;
        }
    </script>
</body>
</html>