HTML | DOM Area coords Property
The Area coords Property in HTML DOM is used to set or return the value of the coords attribute of an area. It specify the x and y coordinate of an area.
Syntax:
- It return 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 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 which represents the comma-separated list of coordinates.
Example 1: This example returns the Area coords Property.
html
<!DOCTYPE html><html><title> HTML DOM Area coords Property</title><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. var x = document.getElementById("Geeks").coords; document.getElementById("GEEK!").innerHTML = x; } </script></body></html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Example 2: This example sets the Area coords property.
html
<!DOCTYPE html><html><title> HTML DOM Area coords Property</title><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. var x = document.getElementById("Geeks").coords = "2, 2, 100, 100"; document.getElementById("GEEK!").innerHTML = "The coords has been changed to " + x; } </script></body></html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Supported Browsers:
- Google Chrome
- Firefox
- Internet Explorer
- Opera
- Safari
.png)
.png)
![https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"](https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"){kind=link}