Support and Web Hosting FAQ: Implementing Imagemaps

Implementing Imagemaps

Imagemaps allow the user to click on predefined sections of a graphic picture on your page and have the server respond as if they clicked on a text hyperlink.

FrontPage users:
If you have the FrontPage extensions installed in your account, you do not need to worry about client-side or server-side imagemaps. FrontPage does everything for you. FrontPage has a built-in imagemap editor which you can use to map out your 'hot spots' and it automatically generates client-side and server-side code for you.

Client-side Imagemaps (recommended method)

Client-side imagemaps do not require the presence of a server-side script in order to interpret the coordinates of the "hot" regions of your multi-clickable image. The client-side imagemap is much more efficient than the server-side imagemap and it allows the visitor to see the actual URL associated with the mapped regions in the status bar of their web browser.

Download a mapping program to create a map file based on the desired image. The map file will contain the coordinates of each clickable region. We recommend MapEdit (PC) and WebMap (Mac), but other imagemapping tools may also be available.

Map out the hotspots using one of these programs and select the map file format "Client-side imagemap" as opposed to NCSA or CERN (for server-side maps) prior to saving the file.

Here is a sample client-side map file created using MapEdit:

Include the map file code within the desired HTML document and reference it like so:

<img border="0" src="image.gif" usemap="#sample">

Substitute the name of the desired image above and note the relationship between the HTML tag, <map name="sample"> and the usemap="#sample" attribute above. You can test your new client-side imagemap offline if the links refer to files on your local PC.

Server-side Imagemaps

Server-side imagemaps are less efficient and less user friendly than client-side imagemaps, but they are more widely supported, especially with older browsers.

We use the Apache built-in imagemap processor, mod_imap, to process imagemap requests. mod_imap gives you the same basic functionality as either /cgi-bin/imagemap or /cgi-bin/htimage, but allows simpler HTML coding, runs faster, and has a variety of additional functions that you can use, including text menu generation for text-only browsers.

To implement mod_imap imagemap functionality, you need to perform two steps. First you need to create your imagemap file in NCSA format using an imagemapping tool such as MapEdit (PC) and WebMap (Mac).

# sample NCSA map file
rect /sales/index.html 5,11 20,32
poly /about/company.html 40,36 80,34 75,40 40,70
circle /contact.html#jeff 120,88 130,102
default /index.html

Then you need to reference your map file from its corresponding image in your HTML like this:

Full details of the format as used by mod_imap can be found at:
http://www.apache.org/docs/mod/mod_imap.html
The file format information is in the second half of the page; the first half deals primarily with .htaccess options for text menu generation and other advanced features. You can ignore that information if you don't plan to use those features.

Converting from /cgi-bin/imagemap to mod_imap:

If you're currently using /cgi-bin/imagemap, it is easy to switch to mod_imap. If your HTML looks like this:

Just change it to:

And you're done. Notice that all you're doing is removing the '/cgi-bin/imagemap' part. mod_imap and /cgi-bin/imagemap both use the NCSA imagemap format, so no other changes are needed.

Converting from /cgi-bin/htimage to mod_imap:

If you're currently using /cgi-bin/htimage, you'll make a similar change, i.e.:

becomes:

The htimage program uses the CERN imagemap format, so you must also convert your mapfiles to NCSA format. If you're using a graphical imagemap editor, most allow you to "Save As" either format, so you should be able to just load your files and resave them under NCSA format. If your editor doesn't support NCSA, or you are creating your mapfiles manually, you must make the changes yourself.

A simple example comparing the CERN and NCSA formats can be found at:

http://www.ihip.com/mapfile.html