<area /> -

< Previous | HTML 4.01 Tags / XHTML 1.0 Elements | Next >

Free XHTML 1.0 Class | HTML Validators | Free HTML 4.01 Class

<area /> Description:

Defines the clickable area in an imagemap.

<area /> Web Browser Support:

• Firefox 1, 2
• Internet Explorer 2, 3, 4, 5, 6, 7
• Mozilla 1
• Netscape 2, 3, 4, 6, 7, 8
• Opera 3, 4, 5, 6, 7, 8, 9
• Safari 1, 2
• WebTV/MSNTV
• HTML 3.2, 4.0
• XHTML 1.0: Client-Side Image Map Module, Intrinsic Events Module, Target Module

<area /> Attributes:

All attributes are optional unless indicated.

• accesskey
• alt (required)
• class
• coords
• dir
• href
• id
• lang
• name

• nohref
• onblur
• onclick
• ondblclick
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onmousedown

• onmousemove
• onmouseout
• onmouseover
• onmouseup
• shape
• style
• tabindex
• target
• title

<area /> End Tag:

None. <area /> is a singleton tag

<area /> Contents:

None.

<area /> Valid Context:

The <area /> tag is valid within the following tags:
map

<area /> Usage:

• rectangle area

  <area shape="rect" href="http://webdesign.about.com/" coords="0,0,10,20" />

  Note, the coordinates - the first is the upper left corner (0,0) and the second is the lower right corner (10,20). View
  
  
• circle area

  <area shape="circle" href="http://webdesign.about.com/" coords="0,10,8" />

  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
  
  
• polygon area

  <area shape="poly" href="http://webdesign.about.com/" coords="10,0,20,10,0,10,10,0" />

  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
  
  
• default area

  <area shape="default" nohref="nohref" />

  In this area, the default area is not clickable and so uses the nohref attribute. View

<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

• <map>
• 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

Return to XHTML Element (HTML Tags) Library

< Previous | HTML 4.01 Tags / XHTML 1.0 Elements | Next >

Free XHTML 1.0 Class | HTML Validators | Free HTML 4.01 Class