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 DECthreads(tm) HTTP server server written at Ohio State, as is the case of UBmail at the University of Baltimore. See an example here. There is another tutorial for the NCSA HTTP format of imagemaps, as is the case of Home, Webteach and Pebble servers, running Netscape Web Servers, at the University of Baltimore.

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 CERN.
Enter or browse the file names, select CERN 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: use the absolute address (start with http://...) and NOT the URL relative address. The mapping will not work if you use relative 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. Your imagemap file will look like this example.
ATTENTION: for this file to work with the DECthreads(tm) HTTP server you will need to save it, or rename it, with the extension .imagemap, e.g. name.imagemap in your UBmail Web directory (see below). Also, you can only test this procedure using an imagemap CGI (program) on the server, that is standard with the DECthreads(tm) HTTP server, and many others.

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.imagemap"><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 WWW directory, or a subdirectory of WWW, in UBmail using WS_FTP (NTs), Windows FTP (Pathworks), NFT utility (PCUB network), or upload using a communications package (remote dial-in).

Be careful with the following:

be sure that you renamed in UBmail the imagemap file to name.imagemap, as discussed previously.
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 have been renamed from .htm to .html, both in the hotspot links and in the name of the pages you created.

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.