Chapter 11 - Rollovers

Rollover Rules/Tips

Rollovers require atleast 2 different images, although up to 4 can be used, depending on the state.
All images for a given button must be the same size

The different button states:

normal or off - required
over or on - "required"
down - optional
down and over - optional and rare

Adding a Simple Rollover

Make sure you have necessary files
Place Cursor where you want your image button to be
Under the Common > Image collection button choose Insert Rollover Image
Fill out appropriate fields

Animated Rollovers: A rollover image is any plain web image, so whether it be static or an animated GIF doesn't matter. For simplicity though (and Dreamweaver doesn't support it) don't have one be an image and another be a Flash button.

DisJointed Rollovers

These can be fun because as you rollover one section, another image is replaced. Think e-bay listings: Cannon 1D Mark III where you can rollover a thumnail and see a larger version of the image.

In this case we use just the normal and mouse over functions. These are from the Tag panel group - behaviors.

Couple of important notes:

You must have a link (even a #) over the area to Dreamweaver can attach the code for the rollover effect
You must name the image which will change
The name you use must be unique to the page

Flash Buttons