Dreamweaver 8: Rollovers Made Easy

When you visit a Web page, point to an image and watch it magically change to a different image, the magical behavior is often referred to as a “rollover.”

If you wanted to add a "rollover" behavior to your Web site, one way would be to write a “Swap Image” JavaScript that would get the job down.

If you are good enough to write the script required to perform a "rollover," kudos. However, creating a "rollover" doesn't have to be as complicated as writing the script from scratch. In fact, you're about to learn how to do it in Dreamweaver in just a few steps.

When swapping images, the swap image should be the same size (height and width) as the original. If not, you will see the swapped image take on the size of the original image as the swap occurs. For instance, if the original image is very small and the swap very large, you will end up with some unfortunate viewing.

If you use the “Swap Image” behavior, Dreamweaver automatically provides a “Swap Image Restore” behavior that restores a swap back to the original file.

Create a Simple Rollover

1. Choose Insert > Image Objects > Rollover Image
   
   The Insert Rollover Image dialog box appears.
2. Click the Browse button to the right of Original image and open your first image
3. Click the Browse button to the right of Rollover image and open the image you want to swap for the Original image
4. Click OK
5. Save your work and preview the page in the browser
6. Move your pointer over the image. It should swap from the original image to the new image

Want to learn more about Dreamweaver 8? Click here.