This page is an educational resource intended to provide assistance with the implementation of imagemaps. We hope that you can benefit from its presence and that we may benefit from yours. This page is not under construction; however, more information is needed to make it complete. If, after reading this page, you are able to contribute to its content you are invited to do so. You may not find the answer to all of your questions here, but it should give you something to chew on.

What are the ingredients of an imagemap?

• 1 image in GIF format
• 1 map file based on the image
• 1 imagemap program

Jot that down or print this document for future reference. Consider the following USENET newsgroups as a possible resource for ways to create, resize and convert images:

alt.binaries.pictures.utilities
comp.infosystems.www.authoring.html
comp.infosystems.www.authoring.images

What tools were used to create the sample imagemap?
The image above was created in Specular Infini-D. A map file was created with ease using Mapedit for Windows. Both UNIX and Windows versions of Mapedit are available at the following site:

http://www.boutell.com/mapedit/

The PC version is a zipped file which contains the executable. The UNIX version is a compressed tar file. A similar program is available for the Macintosh, called WebMap -- it can be found at:

http://hyperarchive.lcs.mit.edu/HyperArchive/Archive/text/html/web-map-101.hqx

Be sure to read the documentation for these or any other imagemapping tools.

What's a map file?
In general, a map file contains the coordinates of each region you wish to make active and their corresponding URL links. The geometric shapes in the sample imagemap were mapped-out using Mapedit. Basically, this or any other GIF file is opened in Mapedit and the desired regions are outlined using the mouse. After a region is outlined, you are prompted to enter a URL link. In the sample imagemap, the blue, black, and red regions are links to other files on this server; the green region including text is a "mailto:" link. When complete, a map file is generated with the .map file extension. Click here to review the map database file generated by Mapedit. The white region of the sample imagemap was not mapped-out -- this is called the default region. Information on how to assign a URL to the default region or make a "click" in this region "do nothing" is available. If preferred, you can research methods for writing map files.

What about the imagemap program?
Imagemap is a CGI program that resides on your server. On NCSA servers, this program usually resides in the cgi-bin directory. In a moment you will see how to link your image to the imagemap program which will interpret the coordinates and links within the associated map file. In theory, you should now have an image and a map file. The next and final section will cover the required source code needed to make an image fully active.

Note: The next section assumes that you have the imagemap program installed on your server. The sample sourcecode is based on the NCSA server. The NCSA imagemap script and documentation can be found at:

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html

If your web page(s) reside on a CERN server or you prefer to use CERN's htimage script, download and documentation can be found at:

http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html

How do I make the image fully active?

1. Add the ISMAP attribute to the image element in your source code.

   	<IMG SRC="/user_dir/image.gif" ISMAP>

2. Place a hypertext anchor around the image element which points to the imagemap program.

   	<A HREF="/cgi-bin/imagemap/user_dir/image.map">
   	<IMG SRC="/user_dir/image.gif" ISMAP></A>

Important: The URL is a concatenation of two paths; the path of the imagemap program followed by the path of the map file. This example is derived from the following file structure:

	/cgi-bin/imagemap	...imagemap program
	/user_dir/image.map	...map file
	/user_dir/image.gif	...image

This concludes your tour of the IHiP. We welcome your contributions to this resource page. Please take a moment to submit any comments, contributions, or suggestions. Good luck!

discuss this topic to forum