Image Maps

Dreamweaver offers web designers the capability of creating image maps on the fly. All the tools required are built in. All that is required is to bring the image in and define the different clickable areas.

For this example we'll use the following image:

Once the image has been imported, you'll see a few Map options if you expand the Properties Toolbar:

You can start your work by giving the map a name in the blank field to right of the word Map (a name is required). Then start defining your areas by selecting one of the hotspot tools (the blue shapes on the toolbar). Simply click and drag around the area you would like to make 'hot'. For this example, we'll use the Square Hotspot Tool:

Once the area has been drawn, the Properties Toolbar changes:

The 'Link' field is where you enter the url you wish to link to. For this example, we entered http://www.w3nation.com/. The 'Target' field is just like the standard target for any link. You can use the Presets included in Dreamweaver, or give the target your own name by typing in the field. The 'Alt' field is the Alternative text that will be displayed if graphics are turned off. Here is the information as we entered it for the sample:

and here is the result:

To complete the map, just do the same for all the other areas you wish to be clickable. Here is our finished imagemap:

If you have Invisible Elements turned on, you will see an icon that looks like this next to your image map:

Do NOT delete this! This contains the coordinates of your imagemap. If you delete this, the map will not work.