Imagemaps are images in Web pages that include clickable areas.

An imagemap in a Web page has two components:

Server-side ImageMaps

Server-side imagemaps use a program running in the Web server to interpret the map data. When a visitor to a Web page clicks within the graphic image, the browser program transfers the coordinates of the click to this server program which then examines the map data and determines the URL (web page) to be returned to the browser.

The Apache server used here at FreePages has a built-in server-side imagemap routine. To implement an imagemap for serverside processing with the Apache built-in function, you need your graphic image and a corresponding map file in NCSA format.

Here's an example of a simple imagemap:

You'll note that by clicking on the left side of the graphic, you are taken to my Print Shop Pro Tutorial at http://freepages.computers.rootsweb.com/~elsi/clip-art.html and clicking on the right side takes you to my tutorial on using FTP at FreePages - http://freepages.computers.rootsweb.com/~elsi/free-ftp.html

So how does all this work?

Here's the HTML that I coded in this page for the imagemap:

      <p><a href="image2.map">
      <img src="image2.gif" border=0 ISMAP>
      </a>

The <img> tag looks normal enough except for that extra attribute of ISMAP. This tells the server to use the image map program to determine the target URL when someone clicks within the image.

The part that makes this all work, however, is the <a> (anchor) tag which specifies the map data file which has the coordinates and target URLs specified in NCSA format. I created the map data file using a Freeware program for Windows called MapThis! (Unfortunately, the home server for this program is no longer online and I cannot find any information on where one could download it today.) There are a number of programs available which will create a map data file for use with server-side imagemaps.

Here's the content of my map data file named image2.map:

#$MTIMFH
#$-:Image Map file created by Map THIS!
#$-:Map THIS! free image map editor by Todd C. Wilson
#$-:Please do not edit lines starting with "#$"
#$VERSION:1.20
#$TITLE:Sample imagemap
#$DESCRIPTION:Sample server-side map
#$AUTHOR:Leigh Compton
#$DATE:Mon Nov 29 21:00:11 1999
#$PATH:D:\RootsWeb\freepages\testing\
#$GIF:Image2.gif
#$FORMAT:ncsa
#$EOH
default index.html
poly free-ftp.html 202,3 103,122 318,120 318,0 202,3 202,3
poly clip-art.html 1,0 1,118 103,120 202,2 1,0 1,0

This map data file defines two areas within my image which have URLs associated with them:

You must upload your map data file as an ASCII (text) file. If you do not, then the imagemap routine will not properly read the coordinate data and URLs and your visitors will not be able to navigate your site via your imagemaps.

If you have some feedback on this tutorial, please write to me.