<AREA>

Description:

Area is a tag which is used within a <MAP> tag and must appear between the <MAP> and </MAP> tags. It is used to define the geometric regions of an image map and specify the associated links.

Attributes:

alt="text"
Alternative text to be displayed for the area. In Internet Explorer, this displays as a tooltip.
coords="coordinates"
Specifies the exact coordinates of the image map. Values are separated by commas and are measured in pixels. The number and order of the values depends upon the share being defined. They are measured from the top left corner of the image, which is defined as 0,0.
href="url"
The URL to use if the user clicks on the area.
nohref
No hyperlink is associated with the area.
shape=value
RECT, CIRCLE or POLY. Indicates the shape of the image map.

Examples:

<map name="bold">
  <area href="http://www.internet-tips.net" shape="rect" 
      coords="81, 180, 188, 193">
  <area href="http://www.internet-tips.net/Winawards/bold.htm" shape="polygon" 
      coords="113, 50, 112, 72, 116, 78, 120, 102, 101, 101, 101, 129, 182, 
              128, 185, 98, 172, 99, 172, 76, 177, 44">
</map>
<img border="0" src="http://www.internet-tips.net/images/sample02.gif" usemap="#bold">

This example shows two image maps. The first map is a rectangle surrounding the URL text on the graphic. This allows someone to click on the URL in the graphic image and go to the site. The second is a complex polygon surrounding the words "Bold Site Award" on the graphic. Clicking here will send someone to the Bold Site Award page in this site.

See also <MAP> and <IMG> for more information.

Tips:

  1. Use ALT liberally so something is displayed if your visitors do not display graphics.

  2. Image maps can be a real pain to create and maintain. This is one of those HTML tags where a WYSIWYG editor link Frontpage or Dreamweaver comes in handy.