HTML coords Attribute
Example
<img src="img/desk.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Computer" title="Computer" href="img/computer.png" coords="365,99,905,783" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="img/cup.png" coords="1047,672,97" shape="circle">
<area target="_blank" alt="Mobile" title="Mobile" href="img/mobile.png" coords="960,385,1040,541" shape="rect">
<area target="_blank" alt="Book" title="Book" href="img/book.png" coords="175,426,96,527,20,664,232,755,298,628,364,505" shape="poly">
</map>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
<element coords="value">Browser Support
Status
Applies to:
The coords attribute can be used on the following element:
Attribute Values
| Value | Description | ||
|---|---|---|---|
| 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"> |