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.
<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>
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. |
Here is when coords support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
