How to Create Image Map Hotspots in Dreamweaver
An image map is a digital graphic on a Web page that contains areas (hotspots) that your visitors click to be taken to another location on the Internet. The benefit of this method is that you bypass the need to create separate image files because the image map links everything together. For example, a photo of the United States would be the image map, while individual states are the linked hotspots. Using Adobe's Dreamweaver application, create your own image map with the hotspots that you need.
Other People Are Reading
Instructions
-
-
1
Launch your Adobe Dreamweaver application and create a new page.
-
2
Select the "Image" option under the "Insert" menu and choose a digital image from your computer using the dialog window that appears. Follow the prompts to enter the optional "Alternate text" and "Long description" and click the "OK" button when done.
-
-
3
Click on a hotspot tool, such as the "Rectangular Hotspot Tool," in the "Properties" inspector and then click and drag the shape over your image to create the hotspot. Be sure to create the shape over the portion of your photo that you want visitors to click.
-
4
Enter the URL address in the "HREF" text field of the "Properties" inspector to assign it to the hotspot. Then type a description of your image map in the "Alt" text field to provide an explanation for visitors who use screen readers.
-
5
Repeat Steps 3 and 4 to create any additional hotspots required.
-
6
Save your file and then select "Preview in Browser" under the "File" menu to test your image map.
-
1
Tips & Warnings
You can move your hotspot by clicking and dragging it to a new location. Additionally, click a corner on the shape and drag it in or out to adjust the size.
References
Resources
- Photo Credit Jupiterimages/Brand X Pictures/Getty Images
