HTML <area> coords Attribute

Example

<img src="desk.jpg" usemap="#image-map">

<map name="image-map">
  <area target="_blank" alt="Computer" title="Computer" href="computer.png" coords="112,31,285,246" shape="rect">
  <area target="_blank" alt="Cup" title="Cup" href="cup.png" coords="327,212,31" shape="circle">
  <area target="_blank" alt="Mobile" title="Mobile" href="mobile.png" coords="296,121,326,176" shape="rect">
  <area target="_blank" alt="Book" title="Book" href="book.png" coords="53,132,115,157,72,237,2,211" shape="poly">
</map>

Try this code ❯

Meaning

The coords attribute contains a set of values specifying the coordinates of the hotspot region.

Notes:

For a rectangle shape, the coords value is two x,y pairs: left,
top, right, and bottom.
For a circle shape, the coords value is x,y,r, where x,y
is a pair specifying the center of the circle and r is a value for the radius.
For a polygon shape, the coords value is a set of x,y pairs for each point in the polygon:
x1,y1,x2,y2,x3,y3, and so on.

Standard Syntax

<area coords="value">

Attribute Values

Shape	Value	Description	Example
default	-	The entire region.	-
rect	x1,y1,x2,y2	The coordinates of the top-left and bottom-right corner of the rectangle.	<area shape="rect" coords="0,0,200,300" href="#" target="_blank" alt="txt">
circle	x,y,radius	The coordinates of the circle center and the radius.	<area shape="circle" coords="1047,672,97" href="#" target="_blank" alt="txt">
poly	x1,y1,x2,y2,..,xn,yn	The coordinates of the edges of the polygon.	<area shape="poly" coords="175,426,96,527,20,664,232" href="#" target="_blank" alt="txt">