Image maps are one of the most-used and least-understood display functions used in Web development. Although they have been around for ages, very few people understand the concept and the creation of image maps. In short, image maps are navigation tools that allow hyperlinking from within an image environment. A good example is actually a map, where you could click a city to take you to a page about that city. Here's how it works. The image is really a coordinate of cells, with a block of cells designated to hyperlink to a particular page. To create an image map, your best bet is to
get an image map editor, but you can code them by hand. Here's how:

<IMG SRC="theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0"
usemap="#theimage">

<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.html">
<area shape="rect" coords="101,1,200,50" href="page2.html">
<area shape="rect" coords="201,1,300,50" href="page3.html">
<area shape="rect" coords="301,1,400,50" href="mailto:[email protected]">
</map>

The above code cuts up the image into 4 pieces for different links. The "coords" are the pixels of the image (the cells) X-start, Y-start, X-end, Y-end So our first link starts at pixel 1 width and 1 height and ends at 100 width and 50 height. (Remember width starts at left and height at top.)