How to Map an Image in Dreamweaver Cs5

Image Maps in Dreamweaver.

Mapping an image in Adobe Dreamweaver, a popular Web page design program, consists of creating hotspots, or links, on the image that users click to navigate a website. Images mapped in this manner are called "image maps." You can create an image map from any graphic or photograph you import into an HTML page with Dreamweaver's image mapping tools.

Things You'll Need

• Adobe Dreamweaver CS2 or later
• Graphic file

Instructions

1. Open the HTML file in which you want to create an image map in Dreamweaver, or start a new page by clicking the "File" menu, and then choosing "New." This opens the New Document dialog box. Choose "HTML" from the Type column, select the desired page layout from the Layout column and then click the "Create" button.

2. Click the "File" menu and choose "Save As" to open the Save As dialog box. Name and save the Web page file.

3. Click in the page where you want to create the image map to place the cursor.

4. Click the "Insert" menu and choose "Image." This displays the Select Image Source dialog box.

5. Navigate to the graphic file from which you want to create an image map, select it, and then click the "OK" button. Dreamweaver embeds the graphic into your Web page.

6. Go to the Properties panel and select the "Rectangle Hotspot Tool." You can use this or one of the other -- Circle Hotspot or Polygon Hotspot -- tools, depending on the shape you want to make your hotspots. For example, if the image you are mapping contains circular shapes you want to use as buttons, select the "Circle Hotspot Tool."

7. Hold the mouse button and drag the cursor around the area in the image you want to make clickable. When you release the button, Dreamweaver displays a green shaded area where you drew. This is the first hotspot in your image map.

8. Click in the "Link" field in the Properties panel and type the URL for this hotspot.

9. Repeat Steps 6 through 8 for each hotspot you want to create.

Tips & Warnings

• When you upload your Web page to the Web server, don't forget to upload the image file. Otherwise, the image map will not display and work properly.

References

• Webucator; Creating Image Maps in Dreamweaver CS5; Sean, August 2011
• Entheos; Dreamweaver Image Maps; Rachna
• Adobe: Insert Client-side Image Maps

Resources

• W3schools.com: HTML <map> Tag