Image Maps

Image Maps

There are two types of image maps; client-side image maps and server-side image maps.

Server-side image maps

Server-side image maps should be completely avoided. They can be identified when the attribute "ISMAP" is found.

<a href= "">
  <img src="/sites/default/files/accessibility/navbar.gif" border="0" ismap="ismap"

Client-side image maps

Client-side image maps are acceptable. Creating a basic client-side image map requires several steps:

  • Identify an image for the map. This image is identified using the <img> tag. To identify it as a map, use the "usemap" attribute.

  • Use the <MAP> tag to "areas" within the map . The <MAP> tag is a container tag that includes various <AREA> tags that are used to identify specific portions of the image.

  • Use <AREA> tags to identify map regions . To identify regions within a map, simply use <AREA> tags within the <MAP> container tags.

  • Making this client-side image map accessible is considerably easier to describe: simply include the "ALT" attribute and area description inside each <AREA> tag.

The following HTML demonstrates how to make a client-side image map:

<img src="/sites/default/files/accessibility/navbar.gif" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="0,2,64,19" href="/accessibility/general.html" alt="information about us">
<area shape="rect" coords="65,2,166,20" href="/accessibility/jobs.html" alt="job opportunities">
<area shape="rect" coords="167,2,212,19" href="/accessibility/faq.html" alt="Frequently Asked Questions">
<area shape="rect" coords="214,2,318,21" href="/accessibility/location.html" alt="How to find us">
<area shape="rect" coords="319,2,399,23" href="/accessibility/contact.html" alt="How to contact us">