Sun Sun
Easy Tutorial

HTML <area> coords Attribute

HTML <area> Tag

Example

Image map with clickable areas:

<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.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Browser Support

All major browsers support the coords attribute.


Definition and Usage

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

The coords attribute works with the shape attribute to specify the size, shape, and placement of an area.

Tip: The coordinates of the top-left corner of an image are "0,0".


Differences Between HTML 4.01 and HTML5

NONE.


Syntax

Attribute Values

Value Description
x1,y1,x2,y2 If the shape attribute is set to "rect", this value specifies the coordinates of the top-left and bottom-right corners 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 polygon's vertices. If the first and last coordinates are not the same, the browser must add the last pair of coordinates to close the polygon.

HTML <area> Tag