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