Graphical Information Map Tutorial

Introduction

First Steps

Make sure you have a working NCSA httpd server installed and running.

Make sure you have write privileges to the server's conf/imagemap.conf config file.

Also make sure that the imagemap program is compiled and in the server's htbin directory.

This tutorial also assumes use of NCSA Mosaic for X version 2.0. Other clients that support inlined GIF images and HTTP/1.0 URL redirection will also work.

Your First Image Map

First, create an image.

There are a number of image creation and editing programs that will work nicely -- the one I use is called xpaint (you can find it on ftp.x.org in /R5contrib; here's the tar file). The important thing is that the image ends up in GIF format.

A common scheme for an image map is a collection of rectangles and circles, each containing a short text description of some piece of information or some information server; interconnections are conveyed through lines or arcs. Try to keep the individual items in the map spaced out far enough so a user will clearly know what he or she is clicking on.

Here is an example image map. It looks terrible; I slapped it together in about 10 minutes. You should be able to do much better.

Here is what an image map file looks like:

default /X11/mosaic/public/none.html

rect http://cui_www.unige.ch/w3catalog    15,8    135,39

rect gopher://rs5.loc.gov/11/global       245,86  504,143  
rect http://nearnet.gnn.com/GNN-ORA.html  117,122 175,158 

The format is fairly straightforward. The first line specifies the default response (the file to be returned if the region of the image in which the user clicks doesn't correspond to anything).

Subsequent lines specify rectangles in the image that correspond to arbitrary URLs -- for the first of these lines, the rectangle specified by 15,8 (x,y of the upper-left corner, in pixels) and 135,39 (lower-right corner) corresponds to URL http://cui_www.unige.ch/w3catalog.

So, what you need to do is find the upper-left and lower-right corners of a rectangle for each information resource in your image map. A good tool to use for this is xv (also on ftp.x.org in /contrib) -- pop up the Info window and draw rectangles over the image with the middle mouse button.

It doesn't matter where you put your map file or what you name it. For the purposes of this example, let's assume it's called /foo/sample.map.

Third, tell your server about your image map file.

You do this by adding a file to the server's conf/imagemap.conf file. The line looks like this:

sample : /foo/sample.map

... where sample is the symbolic name for your image map and /foo/sample.map is the actual name of your map file.

Fourth, create an HTML document that contains your map image.

An example follows:

Click on the information resource you wish to see: <P>

<A HREF="http://web.archive.org/web/199506/http://machine/htbin/imagemap/sample">

<img src="/view-wwwdir_n/http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/sample.gif" ismap>
</A> <P>

Note:

• machine is the name of the machine on which your HTTP server resides.

• sample is the symbolic name of your image map (from above).

• sample.gif is the name of your image (assuming, of course, that it's in the same directory on your server as the HTML file).

Subsequent Image Maps

Real-World Examples

• Experimental Internet Resources Metamap at NCSA.

• University of California Museum of Paleontology.

• National Institute of Standards and Technology.

• Server map at NCHPC Information Server.

For More Information