HTML Reference Manual

HTML Tag List

HTML: <area> coords attribute

The coords attribute specifies the x and y coordinates of the image map area. The coords attribute is used in conjunction with the shape attribute to specify the size, shape, and position of the area. Tip: The coordinates of the top left corner of the image area are 0,0

　HTML <area> tag

Online Example

Image map with clickable areas:

Example

<!DOCTYPE html>
<html>
<title>HTML: <area> coords attribute　-　Basic Tutorial Website　oldtoolbag.com</title>
<body>
<p>Click on the sun or one of the planets to observe it closely</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
　　　<map name="planetmap">
　　<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
　　<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
　　<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
　　</map>　　
</body>
</html>

Test to see «/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support the coords attribute.

Definition and Usage

The coords attribute specifies the x and y coordinates of the image map area.

The coords attribute is used with 　shape Use the properties together to specify the size, shape, and position of the area.

Tip: The coordinates of the top left corner of the image area are 0,0.

HTML 4.01 and HTML5The differences between

None.

Syntax

<area coords="value">

Attribute value

Value	Description
x1,y1,x2,y2	If the shape attribute is set to "rect", this value specifies the coordinates of the top left corner and the bottom right corner of the rectangle.
x,y,radius	If the shape attribute is set to "circ", this value specifies the coordinates of the center and the radius of the circle.
x1,y1,x2,y2,..,xn,yn	If the shape attribute is set to "poly", this value specifies the coordinates of the vertices of the polygon. If the first coordinate and the last coordinate are not the same, then to close the polygon, the browser must add the last pair of coordinates.

　HTML <area> tag

HTML: <template> tag