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.

Identifying the Original Image and Rollover Image
Before using this tutorial, you should already have your rollover images.

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 Interactive Images, 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 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.

8. 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.