How to Create Hot Spots in Dreamweaver CS5
If you have a large image on your Web page, you can create an image map and add clickable areas, known as "hot spots," that allow you to link to multiple pages from one image. Using Dreamweaver, you can create hot spots without knowing how to write code by using the design editing mode. Use the provided tools to draw the shape of the hot spot on the image; Dreamweaver then automatically inserts the code for you.
Other People Are Reading
Instructions
-
-
1
Open your Web page in Adobe Dreamweaver.
-
2
Click on the image you want to use to create an image map.
-
-
3
Type a name for the image map in the "Map" text box in the Properties window at the bottom of the program.
-
4
Select one of the hot spot shape tools, such as the Circle Hotspot Tool, and drag the shape on the image where you want the hot spot to appear. A semitransparent shape appears on the image to indicate the position of the hot spot.
-
5
Type the path of the page you want the hot spot to link to in the "Link" text box. To link to an internal page, click the folder icon next to the "Link" text box and select the page.
-
6
Type a short description of the hot spot in the "Alt" text box. This text is displayed when images are disabled in a Web browser, and helps describe the image to the user.
-
7
Select a target type from the "Target" pull-down menu. The target type tells the Web browser how to display the linked page. For example, selecting "_blank" from the menu tells the browser to open the link in a new window.
-
1
Tips & Warnings
Press "F12" to preview the page in a Web browser. The hot spots in the image work the same in the preview page as they do when the page is uploaded to your website.
