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