HTML <area> coords Attribute

HTML <address>

HTML <article>

The coords attribute on an <area> tag defines the coordinates of a clickable area on an image.

Coordinates start at 0,0 which is the top-left corner of the area.

Example

#

Three <area> elements, each with a coords attribute. The coordinates outline the screen, the keyboard, and the mouse respectively.

<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">

<map name="computermap">
  <area shape="rect" coords="253,142,16,2" alt="Screen" 
        href="javascript:alert('Screen was clicked');">
  <area shape="rect" coords="262,218,0,156" alt="Keyboard" 
        href="javascript:alert('Keyboard was clicked');">
  <area shape="circle" coords="267,234,22" alt="Mouse" 
        href="javascript:alert('Mouse was clicked');">
</map>

Using coords

#

The coords attribute specifies the coordinates of an area's image map.

Coordinates start at 0,0 which is the top-left corner of the area.

Multiple coordinate values are separated by commas.

Different shapes have different coordinate requirements (see below).

Syntax

#

<area coords="coordinates" />

Values

#

Value	Description
x1,y1,x2,y2	For rect shape: coordinates are the top-left and bottom-right corners of a rectangle.
x,y,radius	For circle shape: coordinates are the center and radius of a circle.
x1,y1,x2,y2,..,xn,yn	For poly shape: coordinates are the points on a polygon. If the first and last coordinate pairs do not match, the browser will add the last coordinate to close the polygon.