Tips for Using Image Maps

The key to using Image Maps is to make a text-based menu available for browsers that cannot display the image map. A common solution is to also have a text menu below the image map with the same links.

There is also an "alt=" option for the imagemap's "<area>" tag. The Lynx web browser uses this text to automatically create a text-based menu of the imagemap links. Unfortunately, this does not work with graphical browsers when they have images turned off.

A sneaky solution is to use a small one-dot by one-dot transparent .gif image (one is available at http://www.usask.ca/images/null.gif). Build a link around this transparent image, and use appropriate "alt=" text to describe the link. Graphical browsers won't display anything, because the image is transparent. However, text browsers, or graphic browsers with the images turned off, will display the alternate text and let people select it to visit that link.

Here's an example for a help button:

  <a href="help.html"><img
    src="http://www.usask.ca/images/null.gif"
    alt="[Help]"
    border="0"></a>