<area /> Description:
Defines the clickable area in an imagemap.
<area /> Web Browser Support:
<area /> Attributes:
All attributes are optional unless indicated.
<area /> End Tag:
None. <area /> is a singleton tag
<area /> Contents:
<area /> Valid Context:
The <area /> tag is valid within the following tags:
<area /> Usage:
- rectangle area
Note, the coordinates - the first is the upper left corner (0,0) and the second is the lower right corner (10,20). View
<area shape="rect" href="http://webdesign.about.com/" coords="0,0,10,20" />
- circle area
Note, the coordinates - the first coordinate is the center of the circle (0,10) and the second number is the radius (distance from the center) (8) in pixels. View
<area shape="circle" href="http://webdesign.about.com/" coords="0,10,8" />
- polygon area
Note, the coordinates - there can be any any number of coordinates. In this map there are three - 10,0 20,10 0,10 - to create a triangle. The final coordinate closes the triangle by repeating the first coordinate. View
<area shape="poly" href="http://webdesign.about.com/" coords="10,0,20,10,0,10,10,0" />
- default area
In this area, the default area is not clickable and so uses the nohref attribute. View
<area shape="default" nohref="nohref" />
<area /> Special Notes
- Remember to use the trailing slash in your area tag - but precede it with a space so that less-compliant browsers aren't confused.
- Many older browsers don't support the shape="poly" attribute. Use this option with care.
- Some voice and text browsers don't support client-side image maps, so it's a good idea to use alternative navigation on your page as well.
- If the radius of the circle is a percentage, the browsers should calculate the final value based on the object's width and height. The radius will be the smaller of the two.
- With a polygon, it's good practice to repeat the first coordinates at the end of the list - to close the shape.
- It's usually easier to create an image map with an editor than by hand - there are lots of image map editors available, some are even free.
More <area /> Information
- Build Image Maps without an Editor
- Image Map Links
- Image Map Editors
- How to Create an Image Map With FrontPage
- How to Create an Image Map With Dreamweaver