Creating an Image Map in Dreamweaver 8

Insert your image map (Insert > Image) or click the insert image button Dreamweaver 8 Insert Image on your Common Toolbar. I am using an image of the United States for this tutorial:

Dreamweaver 8 Image Map

Select the image by clicking on it then go to your Properties panel. If your Properties panel is not open click Window > Properties to open the panel:

Dreamweaver 8 Properties Panel

At the bottom left corner of the Properties panel the word Map with a text box with 3 blue icons under it:

Dreamweaver 8 Hotspots

Select one of the blue icons which are hotspot drawing tools (Rectangular, Oval, and Polygon). Hotspots are like links. The only difference is that they have location coordinates on the image.

Draw out you hotspot area which will create a link to a particular page. For the link type in the page you want to go to when you click on the map deleting the # sign. Notice the Link below is to a webpage online. All you have to do to link to a page on your site is to point by dragging this icon Dreamweaver 8 Point to Link to the page or clicking the browse Dreamweaver 8 Browse to Link folder button and clicking on the page you want to open. For target choose _blank to open your page in a new window.

Dreamweaver 8 Image Map Options

After you have drawn and defined all your hotspots, just click on the black arrow icon below the map name to get back the arrow cursor.

Click F12 to test your image map.

Dreamweaver 8 Tutorials