HTMLAreaElement: coords property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The coords property of the HTMLAreaElement interface specifies the coordinates of the element's shape as a list of floating-point numbers. It reflects the <area> element's coords attribute.
If the shape is rect, the shape is a rectangle and the string value's four comma separated numbers specify the coordinates of the top-left and bottom-right corners of the rectangle. For example, 0,0,200,20 defines the coordinates as 0,0, which is the top-left of the image map, and 200,20, which is 200px from the left and 20px from the top of the top-left corner of the image map.
If the shape is circle, the three comma-separated numbers represent the x and y coordinates of the circle's center and the radius.
If the shape is poly, the string consists of at least 6 comma-separated numbers representing at least 3 pairs of coordinates that define the vertices of the polygon.
For all coordinates, the origin is the top-left corner of the <map> element's image.
Value
A string; composed of a comma separated series of numbers.
Examples
const areaElement = document.getElementById("circleArea");
console.log(areaElement.coords);
areaElement.coords = "25,25,25";
Specifications
| Specification |
|---|
| HTML # dom-area-coords |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
coords
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support