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

js
const areaElement = document.getElementById("circleArea");
console.log(areaElement.coords);
areaElement.coords = "25,25,25";

Specifications

Specification
HTML Standard
# dom-area-coords

Browser compatibility

BCD tables only load in the browser

See also