Client-side imagemaps

This tutorial, unlike the NCSA and CERN server-side tutorials, do not require a server for its execution. The modern browsers translate the hot-spots in an image to page URLs, without needing a server. This makes the page download faster and the development of imagemaps easier. See an example here.

This tutorial will also uses a special software available for Windows and X-Windows (Unix) -- Mapedit -- for helping define the image hotspots, like in the server-side tutorials. 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. The graphical examples shown in the tutorial are from the Windows version (it also runs under SoftWindows in Unix and Macs).

Imagemap development overview using Mapedit

1. an inline 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. See my tutorial on graphics.

2. an HTML document using regular markups and including the inline image you selected or created. You will open this page in Mapedit to select hot-spots and map them to URLs, as explained next.

Creating a client-side imagemap file

1. a gif file that you will use as the clickable image.

2. an html page with the gif file on the page using <img src="image.gif"> , where image.gif is the name of your gif file.

• open Mapedit and you will see this screen or similar.

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

• You will see your image inside Mapedit ready to be mapped like in this example.

• use the circle if your image has areas of this shape. This example shows how the circle tool looks like. Click to end drawing the circle. Another dialog will be displayed asking for the URL name for this hotspot. Enter the absolute or relative address, as applicable, where the hotspot should lead to.

• use the rectangle if, again, your image has areas of this shape. This is an example. Again, click to end, and enter the absolute or relative address 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. One more time, enter the absolute or relative address where the hotspot should lead to.

• Select File, Edit Default URL and you will see a dialog to enter the URL for the case when the person does not click in the hotspots.

• Please note that the order you define the hotspots will be the order the browser will use to resolve priorities when overlapping areas of your image are selected by the reader.

• Select File Save, and your original HTML page will be saved with the client-side imagemap on it, or File Save As and give a new name to the page with the imagemap. You are done. You can test the imagemap by opening your page in the browser, locally, before uploading to Home.

• Don't forget to upload your page and the image to Home, after testing locally.

  ---

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