Imagemap tutorial

General information

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

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

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:

   • 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. Most Web servers accept relative addresses, but the mapping will not work if you use relative addresses in servers using the DECthreads® HTTP, etc. I suggest you develop your server-side imagemap files using absolute addresses to be in the safe side.

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

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.
   • In the older version: 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.

   • In the newer version: use the File pushdown menu and select Export Old Server Map to save your map in a file as shown in this image. When click on save it will ask you for the server type: NCSA or CERN, select NCSA as shown in this example.

   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

• 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

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