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, and (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:

  1. 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.

  2. a file mapping parts of this image as hotspots or clickable areas in the image. This is covered below under creating am imagemap file.

  3. 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.

  1. open Mapedit and you will see this screen.

  2. 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.

  3. 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.

  4. 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:

    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.

  5. 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.

  6. You are almost done. Use the File pushdown menu and save, or save as, your imagemap file. Mapedit will save the file as, where fname is the name you gave to the imagemap file. Your imagemap file will look like this example.

  7. 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:

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:

Test and enjoy it!

This page is maintained by Al Bento who can be reached at 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.