How to Create a Clickable Image Map With Dreamweaver

Image maps are pictures with clickable regions also known as "hotspots." When users click on one of the hotspots, they're directed to the page you designate. Dreamweaver 3.0 lets you easily create image maps to add fun and excitement to a page.

Difficulty: Moderate

Instructions

Things You'll Need:

• Macromedia Dreamweaver

1. Start Dreamweaver and open the page where the image map will appear.

2. Insert an image to use as the map, or click on an existing image.

3. Open the File menu and select Window, then Property Inspector.

4. Click on the arrow in the lower left corner of the Property Inspector to expand the options.

5. In the Map Name box, type the name of the image map. This helps the browser know which map is being referenced when you set the hotspots.

6. Choose the desired hotspot shape: circle, rectangle or polygon.

7. Drag the shape over the image until it covers the desired hotspot area.

8. In the Hotspot Inspector box, type the name of the URL or select the file the hotspot will take the user to.

9. Type alternate text that will appear for text-only browsers in the ALT box. For example, if a hotspot points to the Products page, type Products in the ALT box.

10. Repeat the procedure to add new hotspots.

11. Save the page when finished, and preview it by choosing Preview in Browser from the File menu.

Tips & Warnings

• If you copy an image map to another page after you've saved the original page, the hotspots are copied as well.
• In some browsers, the text typed in the ALT box will appear when the mouse hovers over the hotspot.
• Not all browsers support client-side image maps and some browsers are text-only, so be sure to use the ALT box to specify text links for the users of these browsers.

Who Can Help Sponsored

• How To Make Big Money With Low-Budget Postcard Projects. PostcardProfits.com

[tdjprj]

on 7/28/2009 An easier way to do image map is to use clickable flash maps -- check out http://www.imapbuilder.com. The software can import any image file, convert it to flash, and add clickable points and regions, with icons, mouseover tooltips, etc