About this Tutorial
Image Maps might not be the most popular technique to design a site, but it can be a lifesaver if either don�t want to or can�t (for whatever reason) slice you layout. This tutorial will show you how to use image maps to make a navigation bar for your site, and combine them with a drop-down menu. We will be using Dreamweaver MX 2004�s built-in tools for this, which are probably also available with older versions.

Requirements
Dreamweaver MX or later
A Webpage to work with

The Tutorial

The first step is too open the webpage you would like too apply the image map too. I will be using Flaming-Dirt v3, which I am currently working on. Below is a screenshot



The next step is too select the image and add image maps. You do this by selecting the image map tool in the properties manager, as displayed below:



In the field labelled �Map�, type the name of your image map. Make it something which is easy to remember, e.g. �nav�. Now, using either the square, circle or polygon tool, you select the parts of the image where you want to apply links. My image ended up looking like this:



The good think about using Dreamweaver for this is that you can see where your image maps are, and you can also easily rearrange them if you don�t like where they are placed. Next comes the coding part. You will obviously have to tell the browser where the image map is located and where to link it too. Switch into coding view (View > Code) and Dreamweaver will have created something similar to this for you:



As you can see a usemap attribute has been added to the image file, and below the image is the information for your image map. The numbers are the coordinates of the maps. What you now have to do is to fill out the href attribute with an appropriate link. If you now test your webpage by clicking F12, you will see that the cursor changes when you mouse over the maps, and you will be taken to the website you filled into the HREF attribute for that map.
Now comes Part 2. Lets say I want too ad a drop-down menu to the �team� map too display all the names of the team members for easier navigation. Dreamweaver also has a built in JavaScript behaviour to assist you in this. Switch back to Design View (View > Design) and select the map you would like to add a drop-down menu too. I select the �Team� map. Now look on the right of your Dreamweaver. There is a toolbox called the Tag Inspector. If you cannot find it, go to Window > Tag Inspector to open it. This toolbox contains 3 tabs. Select the one labelled �Behaviours�. Now click on the + sign to bring up a menu, from which you will select the �Show Pop-Up Menu� Command. Below is a screenshot to clarify what I mean:



This will bring up a Box where you can customize the pop-up menu. You can add items, change colours and borders. I will not do a step-by-step for this as it is pretty self-explanatory, but I have outlined the major things you can do in each section:
Contents: Add list items and add a link too them. Add new ones by clicking on the + symbol, use the arrow keys to move them up or down in the list.
ion:
Appearance: Here you can customize the look of your menu. You can change font, size, colour and border.
ion:
Advanced: This is an add-on to the appearance section. You can change the cell padding, spacing and most importantly, the menu delay. This controls how much time passes in which the user is NOT scrolling over the menu until it disappears.
ion:
Position: Here you control where the menu shows up. There are four presets, which I strongly advise to use, but you can also insert your own values in the two boxes.

Voila, you now have a functioning image map and pop-up menu, properly functioning. Save and test your page using F12, and you will see the results. A working example can be found at Flaming Dirt when you scroll over the �Gallery� button.

My Finished Example:


Side notes:
You will notice that a lot of JavaScript Code has been added in the section of your page. Do not alter this unless you have sufficient knowledge of JavaScript, because it might make your menu unusable.

Also there will be a page added in your directory called mm_menus.js. This is also a vital part of the menu, so the same rule as above applies

To comply to web standards, remmeber to always fill out the ALT attribute in the image with text that describes your image and that would let the user know what the image mean. For example I might name mine "FlamingDirt - Version 3 Header"