From 51d5fca1327df21241652ca38c66445b9de50b19 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 15 Nov 2024 12:31:26 -0800 Subject: [PATCH 1/3] New page: htmlareaelement.coords --- .../web/api/htmlareaelement/coords/index.md | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 files/en-us/web/api/htmlareaelement/coords/index.md diff --git a/files/en-us/web/api/htmlareaelement/coords/index.md b/files/en-us/web/api/htmlareaelement/coords/index.md new file mode 100644 index 000000000000000..70171120bf7df21 --- /dev/null +++ b/files/en-us/web/api/htmlareaelement/coords/index.md @@ -0,0 +1,42 @@ +--- +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 for the shape described by the {{DOMxRef("HTMLAreaElement.shape")}} property 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 corner 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 circles 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 edges of the shape of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon. + +## Value + +A string. 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")}} From ba96092d865c5e1fadbaf7efd048a67c808e1c22 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 15 Nov 2024 12:52:42 -0800 Subject: [PATCH 2/3] new page: shape --- .../web/api/htmlareaelement/coords/index.md | 2 +- .../web/api/htmlareaelement/shape/index.md | 39 +++++++++++++++++++ 2 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/htmlareaelement/shape/index.md diff --git a/files/en-us/web/api/htmlareaelement/coords/index.md b/files/en-us/web/api/htmlareaelement/coords/index.md index 70171120bf7df21..a1b1301019db805 100644 --- a/files/en-us/web/api/htmlareaelement/coords/index.md +++ b/files/en-us/web/api/htmlareaelement/coords/index.md @@ -14,7 +14,7 @@ If the `shape` is `rect`, the shape is a rectangle and the string value's four c ## Value -A string. A comma separated series of numbers. +A string; composed of a comma separated series of numbers. ## Examples diff --git a/files/en-us/web/api/htmlareaelement/shape/index.md b/files/en-us/web/api/htmlareaelement/shape/index.md new file mode 100644 index 000000000000000..45d189200f498f8 --- /dev/null +++ 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")}} From 14347762ed4dc5fad74abec6aea50703aaf24dbc Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 2 Dec 2024 05:23:23 -0800 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: wbamberg --- files/en-us/web/api/htmlareaelement/coords/index.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/htmlareaelement/coords/index.md b/files/en-us/web/api/htmlareaelement/coords/index.md index a1b1301019db805..ff8d1dc28d0d41d 100644 --- a/files/en-us/web/api/htmlareaelement/coords/index.md +++ b/files/en-us/web/api/htmlareaelement/coords/index.md @@ -8,9 +8,15 @@ browser-compat: api.HTMLAreaElement.coords {{APIRef("HTML DOM")}} -The **`coords`** property of the {{DOMxRef("HTMLAreaElement")}} interface specifies the coordinates of for the shape described by the {{DOMxRef("HTMLAreaElement.shape")}} property as a list of floating-point numbers. It reflects the {{htmlelement("area")}} element's [`coords`](/en-US/docs/Web/HTML/Element/area#coords) attribute. +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 corner 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 circles 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 edges of the shape of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon. +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