Image Maps

Image maps are areas of an image that are associated with behaviors triggered by a cursor. For example, a cursor moving over an image may cause it to change colors or become highlighted. Clicking the mouse may then take you to a different web page.

Web accessibility guidelines require image maps to be client-side based, that is, their information has to appear in the html on which the page is based. This enables screen readers and text browsers to read the Alt text that accompanies each image.

A client-side image map is used in this website for "Tutorial" navigation in the main navigation bar as part of a drop down menu.

Code Example:

<map name="m_TutorialDropDown">
<area shape="rect" coords="0,0,75,25" 
href="../Pages/Introduction.html"
alt="Tutorial for accessible website design"
onMouseOver="MM_showMenu
(window.mm_menu_0219123232_0,0,0,
null,'TutorialDropDown')" 
onMouseOut="MM_startTimeout();" >
</map>

Note that using image maps for text-based navigation can be problematic since font size will not be enlarged by user browsers, unlike text defined by style sheets.