New page: htmlareaelement.coords and shape (#36813)

* New page: htmlareaelement.coords * new page: shape * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> --------- Co-authored-by: wbamberg <[email protected]>
mdn · Dec 2, 2024 · 03c277f · 03c277f
1 parent 4dd8392
commit 03c277f
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/files/en-us/web/api/htmlareaelement/coords/index.md b/files/en-us/web/api/htmlareaelement/coords/index.md
@@ -0,0 +1,48 @@
+---
+title: "HTMLAreaElement: coords property"
+short-title: coords
+slug: Web/API/HTMLAreaElement/coords
+page-type: web-api-instance-property
+browser-compat: api.HTMLAreaElement.coords
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`coords`** property of the {{DOMxRef("HTMLAreaElement")}} interface specifies the coordinates of the element's shape as a list of floating-point numbers. It reflects the {{htmlelement("area")}} element's [`coords`](/en-US/docs/Web/HTML/Element/area#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 {{htmlelement("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
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXref("HTMLAreaElement.shape")}}
+- {{DOMXref("HTMLAreaElement.alt")}}
+- {{DOMXref("HTMLMapElement")}}
+- {{HTMLElement("area")}}
+- {{HTMLElement("map")}}
+- {{HTMLElement("a")}}
diff --git a/files/en-us/web/api/htmlareaelement/shape/index.md b/files/en-us/web/api/htmlareaelement/shape/index.md
@@ -0,0 +1,39 @@
+---
+title: "HTMLAreaElement: shape property"
+short-title: shape
+slug: Web/API/HTMLAreaElement/shape
+page-type: web-api-instance-property
+browser-compat: api.HTMLAreaElement.shape
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`shape`** property of the {{DOMxRef("HTMLAreaElement")}} interface specifies the shape of an image map area. It reflects the {{htmlelement("area")}} element's [`shape`](/en-US/docs/Web/HTML/Element/area#shape) attribute.
+
+## Value
+
+A string; `rect`, `circle`, or `poly`.
+
+## Examples
+
+```js
+const areaElement = document.getElementById("imageMapArea");
+console.log(areaElement.shape);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXref("HTMLAreaElement.coords")}}
+- {{DOMXref("HTMLAreaElement.alt")}}
+- {{DOMXref("HTMLMapElement")}}
+- {{HTMLElement("area")}}
+- {{HTMLElement("map")}}
+- {{HTMLElement("a")}}