An image map is an image that contains "hot spots", clickable areas with links. There are basically two kinds of image maps: server-side and client-side. A client-side image map has the advantage of being fully loaded (and cached) along with the HTML page that contains it. This means not only that time is saved for users using the map, but also that Web authors don't have to worry about whether or not their server supports image maps.

You can create an image map from an image either by hand (a rather tedious method), or with an image mapping helper such as the one in Ulead's WebExtensions, or with a full-function image mapping utility such as LiveImage or MapEdit.

The basket-and-text image below is a 24K client-side image map with links to areas of my (nongraphics) personal website, LJ's Place by the Sea.

The image is a transparent GIF. The letters were enhanced with PSP's chisel effect. The areas and links of the map were defined using MapThis! (the precursor of LiveImage).

For more information on how to make image maps using PSP, take a look at Mike Thomas's image map tutorial. Mike does a great job walking you through coding image maps by hand.

Before you get too gung-ho about image maps, note that in some cases you can get the look and feel of an image map with a simple collection of images with links. Consider this faux image map version of my basket-and-text map:

This "image map" is made up of three transparent GIFs:

	6K
	8K
	10K

These three GIFs were then loaded using the following HTML code:

<center>
<table cellspacing=0 cellpadding=0>
   <tr><td>
      <a href="http://home.earthlink.net/~Lamanderdavis/sseeds.html"><img
           src="pics/MAP-SEED_cg31.gif" border=0 height=82 width=258></a><br><a
         href="http://home.earthlink.net/~Lamanderdavis/birds.html"><img
           src="pics/MAP-BIRD_cg32.gif" border=0 height=65 width=258></a><br><a
         href="http://home.earthlink.net/~Lamanderdavis/winerose.html"><img
           src="pics/MAP-ROSE_cg32.gif" border=0 height=111 width=258></a>
   </td></tr>
</table>
</center>

For rectangular hot spots that can be fitted together like this, the faux image map technique works quite well, is very easy, and requires no extra software or special map coding.