HTML <area> coords Attribute

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.



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

Computer Screen Keyboard Mouse
<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');">

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).


<area coords="coordinates" />



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.

Browser support

Here is when coords support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

 Back to <area>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023

What's your favorite/least favorite part of Dofactory?