Procedure for Imagemap

Imagemap tutorial

How can you create "clickable" images with "hotspots" taking the reader to different locations (URLs)?

General information

This tutorial provides an introduction to imagemaps for sites using an HTTP server compatible with NCSA format, as is the case of home.ubalt.edu, webteach.ubalt.edu and pebble.ubalt.edu (Windows systems running Netscape Web servers) at the University of Baltimore. See an example here.

This tutorial will also use a special software available for Windows and X-Windows (Unix) -- Mapedit -- for helping define the image hotspots. The graphical examples shown in the tutorial are from the Windows version (it also runs under SoftWindows in Unix and Macs).

Imagemap development overview

In order to create your imagemaps you need to have three components:

an image saved in gif format: this will not be covered in this tutorial. You can use software packages like MS PowerPoint, Corel Presentations, Freelance and/or Showcase for this purpose. You can also use images copyright-free that you can collect in the Net.
a file mapping parts of this image as hotspots or clickable areas in the image. This is covered below under creating am imagemap file.
an HTML document using regular markups and the ISMAP keyword associating the image with the imagemap program in the server, and the imagemap file. This is also covered below under HTML for showing imagemaps.

Creating an imagemap file

To start this section you need to have created, or have available, a gif file that you will use as the clickable image. You also need to have access to MAPEDIT, either in Windows or X-Windows, for the following instructions are related to the use of Mapedit to create an imagemap file.

open Mapedit and you will see this screen.
select file open/create map and you will see a dialog to enter the names of the gif file and of the new (or old that you are editing) imagemap file, as shown here before the file names were entered, or here after the file names were entered. Please note that you are supposed to check the button NCSA.
Enter or browse the file names, select NCSA and select OK. You will see the gif image shown inside of Mapedit, like in this example.
use the tools pull-down menu to select a shape to map the hotspots, as shown in this picture. You can use a rectangle, a circle or a polygon to mark the hotspots:
- use the circle if your image has areas of this shape. This example shows how the circle tool looks like. Right-click to end drawing the circle. Another dialog will be displayed asking for the URL name for this hotspot.
  IMPORTANT: some servers require the use of absolute address (start with http://...) and NOT the URL relative address. The Netscape Web servers accept relative addresses. The mapping will not work if you use relative addresses in servers like UBMAIL (using the DECthreads® HTTP ), therefore I suggest you develop your imagemap file using absolute addresses.
- use the rectangle if, again, your image has areas of this shape. This is an example. Again, right-click to end, and enter the URL absolute address (see above) where the hotspot should lead to.
- use the polygon for all other cases. Left-click in the beginning and in each point of the part of the image you are drawing the contour, like in this example. When you complete marking all points to define the contour of the hotspot right-click to save it. One more time, enter the URL absolute address (see above) where the hotspot should lead to.
Please note that the order you define the hotspots will be the order the server will use to resolve priorities when overlapping areas of your image are selected by the reader.
Enter a default link if the reader selects an area not in the areas you defined as hotspots. Use the File pushdown menu and select Edit default URL. A dialog box will appear and you should enter an URL absolute address for cases were the reader does not select the hotspots.
You are almost done. Use the File pushdown menu and save, or save as, your imagemap file. Mapedit will save the file as fname.map, where fname is the name you gave to the imagemap file. Your imagemap file will look like this example.
You can do a basic test of your hotspots by clicking on the areas you marked. Mapedit will show the URL you assigned and darken the hotspot area.
You can only test fully this procedure (click on hotspots and see if it goes to an URL) using an imagemap CGI (program) on the server, that is standard with the Netscape Commerce HTTP server, and many other servers. Of course your page and imagemap files should have been uploaded to your directory visible by the Web server. At the University of Baltimore this directory is WWW, both for Worf and UBMAIL.

HTML for showing imagemaps

Before starting this part you should create all possible branching pages, including the default page, defined in your imagemap file. You will not need the branching pages to create the page showing the imagemaps, but you will not be able to test it if you do not have the branching pages. You create the show page (the one where the imagemap will be displayed) as follows:

the show page is marked-up as any other page, including other links, formats, etc, as usual.
use the following format for calling the imagemap program:
<A HREF="name1.map"><IMG SRC="name2.gif" ISMAP></A>
Name1 and name2 are the names you gave to your imagemap and gif files, respectively. These addresses can be absolute or relative. The exact sequence is required, as well as the keyword ISMAP, however.

Copy the files to your Web directory

Copy all files you have created to the driveH:, or a subdirectory of the drive H: in HOME. Of course, you can create the imagemap file, the gif file and the show page in HTML directly in your H: drive or in a subdirectory of drive H: in HOME.

Be careful with the following:

If you copy these files to UBMAIL (a CERN HTTP format) they will NOT work. I suggest you recreate your imagemap file with Mapedit using the tutorial for UBMAIL imagemaps.
your URL references have been adapted to the WWW directory or sub-directory that you decided to copy your files.
your URL references, if you used Windows 3.1, have been renamed from .htm to .html, both in the hotspot links and in the name of the pages you created, depending upon the server you are using. For example .htm will work in Home but not with UBMAIL. In Windows 95 and NT create the files with .html from the beginning to avoid problems.

Test and enjoy it!

This page is maintained by Al Bento who can be reached at abento@ubmail.ubalt.edu. This page was last updated on June 17, 1997. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.