NCSA Imagemap Tutorial

Compiling the Imagemap Script

If you downloaded or pre-compiled NCSA HTTPd server, or compiled your own, chances are the imagemap program was automatically compiled and added to your cgi-bin directory. If so, you can skip this step. If not, you can download the current imagemap.c from here.

Compile the imagemap script by first changing into your ServerRoot directory, and then into the cgi-src subdirectory. Put the new imagemap.c source in place of the old one (if you have the old version of imagemap.c) and then, type make imagemap and you should be all set.


In this section we walk through the steps needed to get an initial image map up and running.

-- 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 (I don't know where its home page is anymore). You can get it here. It's for UNIX systems running an X interface.

-- Second: create an imagemap map file.

This file maps regions to URLs for the given image. For a list of tools that may help you create a map file, see Yahoo's Imagemap Directory. For instance, there is a program called mapedit that you could use.

A common scheme for an imagemap is a collection of points, polygons, 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.

Lines beginning with # are comments. Every other non-blank line consists of the following:

method URL coord1 coord2 ... coordn

method is one of the following:

default - For the default URL
Coordinates: none
circle - For a circle
Coordinates: center edgepoint
poly - For a polygon of at most 100 vertices
Coordinates: Each coordinate is a vertex.
rect - For a rectangle
Coordinates: upper-left lower-right
point - For closest to a point
Coordinate: thePoint

URL is one of the following:

A Local URL
ex. /docs/tutorials
A Full URL
ex. http://www.yahoo.com/

coord#
Each coord entry is a coordinate, format x,y. The number depends on the method.

Notes:

* each method is evaluated in the order it is placed in the configuration file. If you have overlapping areas, such as a circle inside of a rectangle, you should place whichever one you want evaluated first before the other in the map file. In this case, we would put the circle before the rectangle.

* Also note that it does not make sense to use the default method with the point method because if even one point method is specified, anywhere you click will be considered close to the point and the URL specified by point will be serviced.

* If you will be serving access authentication-protected documents through your imagemap, you MUST use fully qualified URLs, for example

http://your.server.com/path/to/protected/file.html

otherwise access will be denied.