Open In App

HTML DOM Area coords Property

Improve
Improve
Like Article
Like
Save
Share
Report

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=
         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=
    </map>
    <img src=
         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>


Output: 

 

 Supported Browsers:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari


Last Updated : 23 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads