CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmasters (CSS Editor / HTML Editor / CSS Validator / HTML Tutorial)
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersHome
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Editor
SEO Report For Windows - The ultimate website ranking checker / search engine optimization toolkit!SEO Report (New)
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Download
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersOrder
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersSupport
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersNews
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersAwards
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersContact
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersLinks
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersAbout
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Validator
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Tools
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS FAQ
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Tutorial
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Articles
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Resources
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersCSS Layouts
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersHTML Tidy
Style Studio CSS Editor - CSS cascading style sheets made simple with Style Studio, powerful CSS Editor / HTML Editor for professional webmastersHTML Tutorial
   
Home » HTML Tutorial » AREA - Image Map Region


AREA - Image Map Region


Summary

Syntax <AREA>
Attribute Specifications
  • SHAPE=[ rect | circle | poly | default ] (shape of region)
  • COORDS=Coords (coordinates of region)
  • HREF=URI (linked resource)
  • TARGET=FrameTarget (frame to render link in)
  • NOHREF (inactive region)
  • ALT=Text (alternate text)
  • TABINDEX=Number (position in tabbing order)
  • ONFOCUS=Script (region received focus)
  • ONBLUR=Script (region lost focus)
  • common attributes
Contents Empty
Contained in MAP

Details

The AREA element defines a map region in a client-side image map. Each map region is a piece of the image with a different action when clicked.

The SHAPE and COORDS attributes of AREA specify what part of the image is included in the region. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

The HREF attribute specifies a link to another resource, such as an HTML document or a JPEG image. The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. The boolean NOHREF attribute indicates that the region has no link.

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the map region rather than a description of the region. For example, ALT="WDG Home" or ALT="Web Design Group" would be more appropriate than ALT="WDG Logo" for a map region whose link went to the WDG home page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images.

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window

In HTML 4.0, the TARGET attribute value is case-insensitive, so that _top and _TOP both have the same meaning. However, most browsers treat the TARGET attribute value as case-sensitive and do not recognize _TOP as having the special meaning of _top.

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for following the link. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the map region. A region with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

In addition to the core events common to most elements, AREA accepts the following event attributes for client-side scripting:

  • ONFOCUS, when the region receives focus;
  • ONBLUR, when the region loses focus.

More Information


Adapted by style-sheets.com, maker of Style Studio, powerful CSS Editor for Windows.

Copyright © John Pozadzides and Liam Quinn. All rights reserved.


Home » HTML Tutorial » AREA - Image Map Region

 

Related Links :


Acknowledgements    |    Site Map    |    FAQ    |    Website Ranking Checker    |    HighDots Forums
Copyright OverZone Software 2000-2008. All rights reserved.


html 4.01 | css 2 (W3C) | css 2