TIP 178: Creating Rollovers

A very popular effect found on even the simplest Web sites is called a rollover. The name describes the effect itself, because as you roll your mouse pointer over an image, the image's appearance is altered. But the effect can also be used when you click the image or move the mouse pointer away from it.

DHTML Drop-down Menus

If you want to create a navigation bar that's more advanced than just rollover images, check out MenuMachine (see Tip 237) for building DHTML Drop-down menus. MenuMachine is a very popular third-party extension for GoLive that's worth every penny.

Rollovers add subtle feedback to a page so visitors know what is clickable and what's important. Here's how to do it: Add an image to the page, open the Rollovers palette from the Window menu, select the Over state, and click the New icon near the bottom of the palette. Now use the Fetch URL tool to assign the rollover image in the URL field at the bottom of the palette. If you want to add other rollover states, such as a Click state, follow the same process.

When you assign an image to a rollover, make sure the Preload option is enabled, and GoLive will write JavaScript that automatically loads all the images when the page loads in a Web browser (Figure 178). If Preload is unchecked, the Over state image won't download until the visitor moves the mouse pointer over the image, where he'll probably see an undesirable delay while the second image downloads.

Figure 178. Edit your rollover states and status message in the Rollovers & Actions palette.

You can also add a status message that appears in the bottom left corner of the browser window when a visitor hovers the mouse pointer over the rollover image. With the Over state selected, click the Create New Message icon and type the status message in the Message field in the bottom of the Inspector.