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

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

Sun in the Garden Pergola with vines Garden Wall Garden Wall Garden Door

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

in the lower left corner are the imagemap tools: Imagemap tools

Give the imagemap a name: Imagemap Name field

Select one of the imagemap tools: 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: Square Imagemap tool.

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

Defining Region

Resize the region if necessary, by clicking on the arrow tool 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:Region Properties

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.

See the Imagemap

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.

February 6, 2004