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 server-side imagemaps for sites using an HTTP server compatible with NCSA format, as is the case of, and (Windows systems running Netscape Web servers), and and and (running Apache Web servers) at the University of Baltimore. See an example here. There is another tutorial for client-side imagemaps.

This tutorial will use a special software available for Windows and X-Windows (Linux and Unix) -- Mapedit -- for helping define the image hotspots. The graphical examples shown in the tutorial are from the Windows version. Mapedit is installed in the UB open labs. Another software -- Map This -- is only available for Windows, but this old version is free to download. Both are similar and this tutorial can be used with any one of the two.

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, or this screen or yet this one, depending on the software version you are using.

  2. In an older version: 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. In a newer version: select from the file menu the html page with the gif file on it as shown in this image with mapedit224.html selected. As soon as you do it, Mapedit will ask you to select an image to be used as the image to be mapped, as shown here. Select it, and click OK.

  4. You will see the gif image shown inside of Mapedit, like in this example or this one.

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

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

  7. You are almost done.

    Your imagemap file will look like this example.

  8. 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 most servers. Of course your page and imagemap files should have been uploaded to your directory visible by the Web server.

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 drive H:, or a subdirectory of the drive H: in HOME. Of course, you can upload the imagemap file, the gif file and the HTML show page using ftp to from your home or office.

Test and enjoy it!

This page is maintained by Al Bento who can be reached at This page was last updated on February 17, 2001. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.