Start Dreamweaver and open the page where the image map will appear.
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.
Things You'll Need
- Macromedia Dreamweaver
Insert an image to use as the map, or click on an existing image.
Open the File menu and select Window, then Property Inspector.
Click on the arrow in the lower left corner of the Property Inspector to expand the options.
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.
Choose the desired hotspot shape: circle, rectangle or polygon.
Drag the shape over the image until it covers the desired hotspot area.
In the Hotspot Inspector box, type the name of the URL or select the file the hotspot will take the user to.
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.
Repeat the procedure to add new hotspots.
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.
How to Create a Clickable Image Map With Dreamweaver
How to Create a Clickable Image Map With Dreamweaver. Part of the series: Dreamweaver Tutorial. ... Make a clickable area on an...
How to Make a Hotspot in Dreamweaver CS4
Hotspots, areas within an image on a Dreamweaver CS4 webpage that open a new webpage when clicked, are useful for a variety...
How to Make a Site Map With Dreamweaver
To make a site map with Dreamweaver, click on "Map View" on the right-hand side of the screen, click on "File" and...
How to Use Dreamweaver to Install Google Maps
Dreamweaver is an advanced HTML web page editor that allows users to create pages with little to no HTML knowledge. Instead, it...