Get an image that you want to use for an image map on your site.

Using a text-based HTML editor (i.e. HTML Notepad) open the web page where you would like the image map to appear. Make sure your image is located in the same folder as the web page (for this example at least).

For this example, we'll call the image "navbar.gif". Insert this line into your web page's HTML code: <A HREF="navbar.map"><IMG SRC="navbar.gif" BORDER=0 ISMAP></A>

Open your web page in a web browser (hopefully Netscape or Microsoft IE). You don't need to upload your page on your server yet. Now run your cursor over the image and as you do that you will notice that x,y coordinates will appear in the status bar at the bottom of your browser.

Now you must figure out which areas of the image you want to become links, and where you want them to link to (URL). Image maps can have 3 types of area layouts, rectangles ("rect"), polygons ("poly"), and circles ("circle"). Write down the coordinates of the areas you want to be links (post-its work great!). If you don't know how to determine an area using the coordinates, go here.

Return to your HTML editor. Somewhere above where you originally inserted the image, insert the following:
<MAP NAME="navbar"><AREA shape="rect" coords="Insert area's coordinates you wrote down" HREF="Insert link URL"></MAP>

You can add as many areas to the image as you want to. The above example only includes one "hotspot" which is in a rectangular shape. For a polygon shaped area, you would replace shape="rect" with shape="poly". For a circular shaped area, you would replace it with shape="circle".

Now you must replace the line that you used originally to load the image:
<IMG SRC="navbar.gif" BORDER=0 ISMAP>
with: <IMG ISMAP usemap="#navbar" SRC="navbar.gif" BORDER=0>

Now once again open your web page in a browser, and the image map will work!

Don't understand something? Read it over a few times, all you need to know is there.