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.

Example:

<a href= "wwwnav.map">

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

    alt="Imagemap">

</a>

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">

</map>

 

Top