How to Make Part of an Image Clickable With Dreamweaver CS5
You can make any part of an image on a Web page clickable using Adobe Dreamweaver CS5. A clickable area is often called a hotspot or image map. You can have more than one hotspot on an image, provided you do not try to overlap them. Hotspots are often used in banners where the navigation menu is written into the banner image using a program like Photoshop. They are also useful when different pictures within an image relate to different subjects in other Web pages.
Other People Are Reading
Instructions
-
-
1
Open an HTML document in Adobe Dreamweaver CS5. Insert an image by selecting “Image” from the Insert menu.
-
2
Select the image in the main document window by clicking it.
-
-
3
Click the bottom right corner of the “Property Inspector” to reveal all of the available property options.
-
4
Type a name for the hotspot you are making in the Map text field. Each should have its own name.
-
5
Select the “Circle" or the “Rectangle" tool to create a regular-shaped hotspot. Drag the tool anywhere on the image by clicking and holding down the mouse. The shape that appears is the hotspot.
-
6
Create an irregular-shaped hotspot by selecting the “Polygon" tool. Click the tool on the image to determine the points of the polygon. The shape begins to appear after you have clicked three points, and is altered in its shape each time you add a new point to the outline. Click the “Arrow" tool to finish the polygon.
-
7
Select the file that should open when the hotspot is clicked by typing its Web address in the text field of the Target dialog box. Alternatively, select a file by clicking the navigation menu in the dialog box.
-
8
Move or resize a hotspot by clicking the “Pointer Hotspot" tool. Drag the hotspot to a new position, or resize it by clicking and dragging an anchor point on the outline.
-
9
Select from the presets to control how the new page is opened. For example, select “_blank” in the Target dialog box for the linked file to open in a new window, or use “_self” to force the page to open in the current window.
-
10
Type the alternative text name for the link in the Alt text box to allow easy navigation for text-only Web browsers, and for the name to be displayed when the mouse hovers over the hotspot.
-
11
Add as many hotspots to the mapped image as needed, then click any blank spot on the page when finished.
-
1
Tips & Warnings
While you can't create hotspots on a background image, you can create the appearance of it being clickable by placing a transparent .png over part of the background and making it clickable.
