Inserting Rollover Effects with Dreamweaver MX 2004

A "rollover" is an interactive feature added to a Web page where two images swap when the mouse is moved over the first image (a mouse-over). This tutorial covers how to insert rollover effects into a Web page using Macromedia Dreamweaver MX 2004.

Identifying the Original Image and Rollover Image
Before using this tutorial, you should already have your rollover images. See our page Making Rollover Images with Photoshop for help, where the original image and rollover image shown below were created.

Original image
"click.gif"

Rollover image
"click_over.gif"

Inserting the Rollover Effect
1. Open up your Web page in Macromedia Dreamweaver.

2. From the Insert menu, select Image Objects, then Rollover Image. The Insert Rollover Image dialog box comes up.

3. Next to Image Name, give the rollover effect a name.

4. Next to Original Image, type in the location of the original image or browse to it by clicking the Browse button on the right.

5. Next to Rollover Image, type in the location of the image that the original will rollover to or browse to it by clicking the Browse button on the right.

6. Check the box for Preload Rollover Image so that the rollover image will be loaded before the Web page viewer actually does the mouse-over.

7. Next to Alternative Text, type in a short description of the image. This text will appear when the image is moused over in a Web browser, or if the image cannot be displayed.

8. Next to When Click, Go To URL type in the address you want the rollover effect to link to or browse to it by clicking the Browse button.

9. Click OK to create your rollover. If you wish to preview how it will appear on the Web, select Preview in Browser from the File menu. Your rollover should work like the example below.