Adding Spice: Making ImageMaps

A Real Tutorial about Creating Interactive Images

If you have been looking for good documentation on creating ImageMaps in your Web pages, then this is it! The information laid out here should show that interactive images are no more difficult to learn than HTML.

This is a hands-on tutorial, showing you how to write your own sample image and configuration files, but it also has a hotlist of selected information pages and cool demos. For a quick start, you can look at my first ImageMap demonstration page.

Overview

There are only 3 or 4 parts that you need to know about to make ImageMaps: When such an image is clicked on, the link is sent to the server as a URL encoding the point where the image was clicked. When the Web server decodes the URL, it scans the mapping file for the region that the user had clicked in -- typically a button, colored shape, or some other identifiable graphic element. If it finds an enclosing shape, it returns the indicted Web document; if the point falls outside every region listed in the map file, the Web server will return the default document specified by the map file.

When you create an image, you should be sure to clearly mark each region as distinct from the background and identifiable by purpose. Icons and buttons should be simple and recognizable (such as a "home", "back", or "help") for general users; using short text descriptions next to buttons will make user identification faster.

Its important to remember that many users will not be able to see your images or use ImageMaps -- either by choice or by software limitations. For these users, you should provide alternate description and access to linked resources.

What you will need

To create the necessary files you will need text and graphics editing software. You should look at the following software packages:

UNIX, X/Windows

Macintosh

DOS, Windows, OS/2

You also need to find out what version of the ImageMap software has been installed onto the Web server. Send the server administrator mail or ask the nearest consultant if the server supports bypassing the global ImageMap configuration file -- they may even have additional documentation describing the process you should use.

Creating the Image

Before you create the image, you should consider what type of information is going to be collected and how it should be organized onscreen. Also think about how the image will fit into the page, perhaps as a navigation bar or as a large title screen. Finally, you should decide what colors and layout you will use to get the best visual effect while maintaining ease of use.

To start, create a simple image using paint package that will create GIF or JPEG images, or using any graphics package that will save to a format you can convert to GIF or JPEG. You should try to use text or recognizable icons so that users can see and predict what a click will bring them. Once you have created a sufficient image, save the file to disk as GIF or JPEG if possible. If not, then save to an intermediate format (XBM, PICT), then use converter software to translate the image into one of the preferred formats.

Creating the Map Configuration File

Once you have created an image, you should already know which portions will will be linked to other Web pages. (If not, then take a few moments to figure them out). Now you need to create a map file, which helps the server translate a user click into a document to download. The map file specifies which portions of the image lead to selected URLs, each line describes a portion within the image and its corresponding output in the following manner: The first line of the map file should be the default mapping, which handles any click outside of the specified shapes. Additional lines describe various shapes as outlined above: URLs can be (relative) file paths or fully qualified locations, and coordinates are specified as "x,y" pairs -- horizontal and vertical offsets from the top-left of the image. Blank lines and those starting with the '#' character are treated as comments and ignored.

Certain graphics packages display coordinates as the cursor passes over the image, others can show rulers reflecting the number of pixels (not just inches) across an image. Use these tools to determine the coordinates of the desired shapes, and then enter that shape and link it to a URL in the map file.

For example, if the image was 200 by 200 pixels and we had divided the image evenly into top and bottom making 2 rectangular buttons, we might use the following lines in the configuration file: 

      default  http://www.ncsa.uiuc.edu/
      rect     somefile.html                  0,0  200,100
      rect     otherfile.html               100,0  200,200
Note that the shapes totally cover the image, so that the default is not necessary (I include it as a convention). The other "URLs" specify local HTML files, and tie them to the indicated rectangles. You can make the map file as simple or complex as necessary, descibing only a few or numerous shapes.

Placing it in a Web Page

Once you have created the image and the mapfile, you need to make them available online. After you upload and place the files into your normal Web directories, you need to place the image properly in the HTML file. The code to inline an ImageMap is slightly different that for a simple or hyperlinked image:

Simple Image

      <IMG SRC="image.gif">

Linked Image

      <A HREF="http://www.ncsa.uiuc.edu/">
      <IMG SRC="image.gif">
      </A>

ImageMap Link

      <A HREF="http://www.sils.umich.edu/cgi-bin/imagemap/sample-map">
      <IMG SRC="image.gif" ISMAP>
      </A>

SILS ImageMap

      <A HREF="http://www.sils.umich.edu/cgi-bin/sils_imagemap/~fprefect/map.txt">
      <IMG SRC="image.gif" ISMAP>
      </A>
Place the above code into your HTML document, replacing the name or path of the selected image files and the symbolic name of the mapfile. For users at SILS, the symbolic name will simply be the additional information to locate the file on the server.

Older servers require the author to add a line to a global configuration file linking a symbolic-name to the path to locate the mapfile. If you have access priviliges to modify the server's configuration file (typically found at conf/imagemap.conf), you should add the following line: 

      sample-map : ~fprefect/map.txt
This tells the server how to locate the associated mapfile when it locates an ImageMap with the given symbolic name. Many such servers, however, will not permit you to modify the configuration file -- you will need to talk to the server administrator to create the symbolic link.

Cool ImageMap Demos

So, what are people doing with ImageMaps? I'm glad you asked! Here is a list of sites that use hyperlinked images as a gateway into their document collections:

Getting More Information

Other sites and net-junkies have organized information, such as other tutorials, useful software, and just plain great documents. Here is a sampling:
This document was created at the University of Michigan School of Information and Library Studies (SILS), but it has been designed for public use. Permission is hereby granted for unlimited print and electronic redistribution. Your feedback is encouraged.

Matt Slot (fprefect@umich.edu) - 5/29/95