"Rollover" effects are becoming more and more common on the web, as powerful web development tools (such as GoLive) make their way into the average person's hands. A rollover happens when you move your mouse over an image and another image appears, either replacing the image you moved over or replacing an image on another part of the page.

This tutorial will show you how to easily create button rollovers in GoLive, using the Button Image CyberObject. To learn about rollovers that change an image on another part of the page, please see the Remote Rollovers Tutorial.

Here we go! In GoLive, open the page you want to create a rollover in. Now choose the CyberObjects Tab from the Palette.

Drag the Button Image CyberObject from the Palette to the place where you want the rollover to be. The Text Inspector should become the Button Inspector.

First things first: name your image in the Name field of the Button Inspector, and hit Enter.

Now click on the Main icon in the Image area. Use GoLive's point and shoot or click the Browse... button to select the "main" image. This is the image that will appear when your page first loads.

Next, click the Over icon in the Image area. Check the box beside the field. Select an "over" image in the same way as you did the first one. This is the image that will appear when the mouse hovers over the first image.

Finally, click the Click icon in the Image area. Check the box beside the field. Here you have two options: displaying a different effect when the user clicks your rollover, or returning the image to its original state. This is the image that will appear when the user clicks your rollover. In the example below, I made the "click" image the same as the "main" image.

Choose the Status & Link tab from the Button Inspector. Check the Status box if you want to display text in the browser's status bar when the mouse is moved over the image. Type in your text. If you don't want to use this option, leave it unchecked.

Check the URL box and type in the URL you want your image to link to. Hit Enter. If you want the image to link to a file, select the file. Use the Target field only if you want the URL to open in a specific frame or in a new window.

You're done! This is what the rollover I just created looks like:

Remember that both images need to be the same pixel size. Also, the rollover images can be preloaded. Refer to the Preload Tutorial for more info.

Keep in mind that rollovers only work in version 3.0 and 4.0 browsers, with the notable exception of IE 3.0. Therefore, be nice and provide textual navigation links on your site, for those with older browsers and slower modems!