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

In order to create client-side imagemaps you need to have two components:

  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.

Note: If you decide to use MapThis (not so friendly, but free) instead of Mapedit follow these alternative instructions.

Creating a client-side imagemap file

To start this section you need to have created, or have available:
  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.
Then proceed as follows

Creating the hot-spots

Saving and uploading