Using Imagemaps

A good place to start with imagemaps is the Apache Imagemap Documentation

Example

Below is an example imagemap graphic. Clicking on the appropriate field will take you to that part of the UW Home Page.

The HTML used to generate this image is:

<A HREF="bbar.map"><IMG SRC="NBhome.gif" ISMAP ALT="Home Page Menu"></A>

The imagemap map file is:

base /home/
rect the_uw.html "About The UW" 25,38 119,55 
rect uwin/deskref.html "Desktop Reference Tools" 121,38 195,55
rect uw_links.html "UW Links" 198,38 280,55
rect beyond_uw.html "Beyond the UW" 282,38 386,55
rect / "UW Home Page" 387,38 477,55

For users of text browsers, the ALT tag in the IMG will make the link show up as Home Page Menu for text-only browsers. Selecting that link will present the user with a menu of options.

Creating Imagemap Map Files

Usually the easiest way to create imagemap map files is by using a dedicated program on a Mac or Windows desktop system. If you are using an X terminal, however, mapedit is available. A version is also available for Windows.

Note that the imagemap map file that gets created will need some slight modifications to be used. Unless you want a specific action to happen as the default, you can remove the default line. The normal default is for no action to occur.

Another change you should make is to put descriptive text for each link, so the text-only menu will look better (see example above.)