Very simple, all the code you'll need, you can find below:
<MAP NAME="map1">
<AREA
HREF="contacts.html" ALT="Contacts" TITLE="Contacts"
SHAPE=RECT COORDS="6,116,97,184">
<AREA
HREF="products.html" ALT="Products" TITLE="Products"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="new.html" ALT="New!" TITLE="New!"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>
<IMG SRC="testmap.gif"
ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map1"><BR>
You can find this example here
If you are having problems finding the correct coördinates for the image mappings, open the image in paint or any image editor. Put the mouse on the top left corner of the first piece where you want your map. Write down the coördinates. Then put the cursor in the bottom right corner and write down the coördinates. You can do this for all the mappings you need on the image. Eg.
<area href="modules.aspx" shape="rect" coords="42,12,143,80"
alt="Modules" title="Manage modules">
<area href="processes.aspx" shape="rect" coords="183,12,285,80"
alt="Processes" title="Manage processes">
42,12 are the coördinates of the upper left corner, 143,80 are the coördinates of the lower right corner.
Why use them? It's a very nice extra navigation option. Make a site overlay picture and add links to each action. When navigation is complex, it could provide an easy overview.
If you want to use images or other object on the picture, you should work with DIV and absolute positions.
