HTML Coords Attribute

Definition

The coords attribute details the coordinates of the relevant shape attribute.

Applicable Elements

The coords attribute can be used with the following elements:

• <area>

HTML <area> coords Attribute

The <area> tag defines predefined clickable areas within an image map. This allows areas on an image to be associated with a link.

The coords attribute can only be used with the <area> element. It specifies the coordinates of the relevant shape attribute.

Syntax

<area shape="rect" coords="20,20,80,80">

Usage

The coords attribute details the coordinates of the relevant shape attribute.

• rect takes the values x1,y1,x2,y2 which specify the coordinates of the top-left and bottom-right corner of the rectangle. It must have exactly four integers as the coordinates.

  <area shape="rect" coords="20,20,80,80" href="#" 
  target="_blank" alt="Rectangle">

• circle takes the values x,y,radius which specifies the coordinates of the circle center and the radius.

  <area shape="circle" coords="150,180,50" href="#" 
  target="_blank" alt="Circle">

• poly takes the values x1,y1,x2,y2,..,xn,yn and specifies the coordinates of each point of the polygon. To close the polygon, the first and last coordinates must be identical. It must have at least six integers as the coordinates.

  <area shape="polygon" coords="10,10,25,30,89,78,20,80,10,10" href="#" 
  target="_blank" alt="Polygon">

• default takes no value, and defines the whole image.

Values

Values can include:

• A list of coordinates for the relevant shape attribute. See above for examples.

Examples

See the Usage section above for examples for each shape.

The example below shows how you can highlight certain parts of an image:

<img src="https://res.cloudinary.com/thewebmaster/image/upload/f_auto,q_auto,w_600/image/moon-earth.png"
width="600"
height="337.5"
alt="Area Tag Demo."
usemap="#workmap"></img>

<map name="workmap">
  <area shape="circle" coords="178,171,133" alt="Earth" href="https://en.wikipedia.org/wiki/Earth" target="_blank">
  <area shape="circle" coords="455,130,80" alt="Moon" href="https://en.wikipedia.org/wiki/Moon" target="_blank">
</map>

We set out here how to find the coordinates of part of an image.

Specification

The coords HTML specification for the <area> element is as follows:

• HTML Living Standard Specification

Browser Support

The coords attribute has the following browser support:

Desktop

Mobile