<coords>

The <coords> element specifies the coordinates of a linkable region in an <imagemap>.

Usage information

The values for use in the <coords> element are defined by the HTML5 specification. The unit used for coordinates is CSS pixels. The following table provides a summary of the syntax, which depends on the shape of the linkable region:

Shape Syntax
circle Three integers, separated by commas:
  1. The distance from the left edge of the image to the center of the circle
  2. The distance from the top edge of the image to the center of the circle
  3. The radius of the circle
default The default shape is the entire image. The <coords> element should be empty.
poly An even number of at least six integers, separated by commas:
  • Each pair of integers represents a coordinate given as the distances from the left and the top of the image respectively.
  • The coordinates represent the points of the polygon, in order.
rect Four integers, separated by commas:
  1. The distance from the left edge of the image to the left side of the rectangle
  2. The distance from the top edge of the image to the top side of the rectangle
  3. The distance from the left edge of the image to the right side of the rectangle
  4. The distance from the top edge of the image to the bottom side of the rectangle

Specialization hierarchy

The <coords> element is specialized from <ph>. It is defined in the utilities-domain module.

Content model

(Text | <data> | <sort-as> | <foreign> | <keyword> | <term> | <text> )*

Attributes

The following attributes are available on this element: universal attributes and @keyref.

For this element, the @translate attribute has a default value of no.

The following attributes are available on this element: universal attributes and the attributes defined below.

@keyref
Specifies a key name that acts as a redirectable reference based on a key definition within a map. See The keyref attribute for information on using this attribute.

For HDITA, the equivalent of @keyref is @data-keyref

@translate
For this element, the @translate attribute has a default value of no.

Example

This section is non-normative.

The following code sample shows how the <coords> element specifies the coordinates of a polygonal region in an image map:

<area>
  <shape>poly</shape>
  <coords>119, 4, 90, 7, 87, 20, 53, 36, 45, 51, 7, 188, 12, 467,
          223, 464, 240, 315, 223, 254, 210, 168, 193, 146, 173, 121, 167,
          87, 169, 70, 181, 57, 189, 35, 164, 24, 140, 4
  </coords>
  <xref format="html" scope="external"
        href="https://en.wikipedia.org/wiki/Frans_Banninck_Cocq">
        Willem van Ruytenburch</xref>
</area>