This work is licensed under a Creative Commons License.

Creating an Image Map in Dreamweaver

Objective: In this tutorial, you will learn how to take the images on your site and link them to other pages; as well as how to embed "clickable" hot spots into your images.

Step 1:

Insert your image into your document.

Step 2:

Highlight your image so the image properties panel is available.

Step 3:

Click the downward arrow on the lower right hand corner of the image properties panel to open up the panel to the image mapping features.

Step 4:

Name your image map. Make sure there are no spaces in the name. You may only have one image map with that name.

Step 5:

Use the rectangle, oval OR the polygon tool on the toolbar to draw hotspots over sections of your image.

Step 6:

When you complete the hotspot, the hotspot properties panel appears. Drag or browse for the file you are linkging to, or type it in. Set the ALT tag by typing in what the link is for. Select the window you want it to load in, if needed.

Step 7:

Click the drawing tool for the next hotspot and draw it on the image. Select the link, target and type in the ALT.

Step 8:

Continue this until it is complete. Click elsewhere on your document and continue with your page.

Step 9:

Your image map will them come out like our example below.

Top