7.06 Rollovers and Hotspots

© 2005 clipart.com

Rollover Reminders

When creating rollovers there are a few things to remember:

• Each image must be the same width and height. If they are not, Dreamweaver will resize the second image to the size of the first. This will distort the second image.
• Make buttons as small as possible. Because you are creating two images, you are also loading two images onto your page.

Creating Buttons with Rollovers

Often a Web designer will create text images in Fireworks, or another photo editor, and create navigation buttons using rollovers.

• View the Creating a Simple Button in Adobe Fireworks page.
• Use these steps twice; once to create the original image and then a second image (in coordinating colors) to use as the rollover.
• Once the images have been saved, optimized, and exported they are ready to be used to create a rollover.
• Now view the Creating a Rollover Image in Adobe Dreamweaver page.

Using Rollovers for Navigation

Using several rollover images in a table is one way to create navigation for your Web site. Another option for navigation is to create an image map. Read the information on the sites below to learn more about the use of image maps.

• The Access Board's Web-based Intranet and Internet Information and Applications
• SmartWebby's Create Image Maps using Macromedia Dreamweaver

Using Rollovers for Image Maps

Image maps can be created by dividing an image into several links by placing hotspots on the image.

• Start by inserting the image on the page.
• Select the image and click on the rectangular or oval hotspot tool in the property inspector.

• Drag around the area of the image to be the hotspot area. A blue-green area with handles appears around the area. The property inspector changes to show the hotspot properties.

• Resize the hotspot, if necessary.
• Fill in the Alt box in the Hotspot properties. This works like the image alt text.
• Next to the link box, click on the folder and navigate to the file you want to link to and select it. This area of the image is now a link to this file.
• Save, and preview in a browser to see how the hotspot works.

To use the polygon hotspot tool, click around the area to be the hotspot. Each click creates a point and each subsequent point is connected by a line to the previous point. Adding points may seem to make the hotspot disappear, but as you click the area will begin to form.

You can place as many hotspots as you like on an image. It is important hotspots do not overlap. These are links to pages and overlapping hotspots may not take the user to the correct page if they click in the area that is overlapping.

Add Your Rollover or Image Map

It is time to add some of the new features and effects you have learned.

• Add at least one rollover or image map to your Web site.
• If you are using rollovers for your navigation, be sure to add (you can copy and paste) the navigation onto each of your Web site’s pages or add the navigation to your site's template.
• Upload your updated files.

© 2008 Screen shot(s) reprinted with permission from Adobe.