Image Map Tips

An image map is an image that has "active areas." When a user selects one of the active areas, an action takes place. For example, the user is transferred to a new Web page, or a pop-up window appears.

There are two types of image maps:

Client-Side Image Maps

With a client-side image map, the user's browser processes a Universal Resource Identifier (URI). The Internet is inhabited by many points of content. A URI is the way you identify any of those points of content, whether it be a page of text, a video or sound clip, a still or animated image, or a program.

The information for all of the "active areas" within the image is sent to the browser along with the image map graphic. As such the image map resides on the user's browser (client).

A client-side image map uses the USEMAP code and is accessible when the alternative text is supplied for each active area of the image map. You must also provide alternative text for the image map itself.

For example:

<IMG SRC="navigation.gif" ALT="Site Navigation Bar" USEMAP="#navigationmap">
<MAP name="navigationmap">
<AREA coords="0,0,20,20" HREF="home.html" ALT="Homepage">
<AREA coords="21,21,40,40" HREF="about_us.html" ALT="About Us">
<AREA coords="41,41,60,60" HREF="contact_us.html" ALT="Contact Us">
</MAP>

Server-Side Image Maps

With a server-side image map, a file on the host server contains the coordinates for the image map, and a server script processes requests.

To create an accessible server-side image map, you either provide a list of alternative text links on the same page as the image map, or a hyperlink to another Web page that contains equivalent text links.

A server-side image map uses the ISMAP code and are currently not accessible to anyone using non-graphical browsers or browsers with images turned off.