Intermediate Dreamweaver

Basic HTML | Site management | Assets | Library of Page Elements| Find and Replace | Templates | Style Sheets | Forms | Imagemaps | Mouseovers | Flash buttons & text | Frames | Tables: Formatting & Sorting | Preview Browsers | Font Lists | Colors | Automating Tasks | Pasting in a Script

Imagemaps allow you to define links as part of a picture, so that when the user clicks on that part of the image, the link is activated.

Using Dreamweaver to make a client-side imagemap on an image

Insert the Image

Open the properties panel for the image to its widest extent:

in the lower left corner are the imagemap tools:

Give the imagemap a name:

Select one of the imagemap tools: The square tool is for rectangular regions, the round one for circular/oval regions, and the irregular polygon shape for irregular polygons. Generally you can get by with the square tool: .

Define a region on the image by drawing it with the tool:

Resize the region if necessary, by clicking on the arrow tool and moving the corners of the region until it covers the pieces you want to make a link.

Whenever the region itself is selected, the region's properties will be visible in the panel:

Set the URL for the Link, the Alt Text to come up when the user puts the cursor over the region, and the Target for the link (if any). [Choosing _blank as the Target makes the link come up in a new browser window.]

Click on the image tool again and define a new region, repeating steps above for each region you want defined.

Once you save the page, the imagemap definitition will be saved along with it. You can add new regions or edit regions any time you are editing the file.