TIP 181: Creating Remote Rollovers

When visiting a Web site, you may roll your mouse pointer over a text link or image and find that an image appears elsewhere on the page. This is referred to as a remote rollover, and in GoLive the effect is created with the Set Image URL Action.

To use Set Image URL, you'll need at least two images that are the same size (see sidebar). Put the one that will be swapped out on the page, select it, choose Name from the Name/ID pull-down in the Basic tab of the Inspector, and give it a name (Figure 181a).

Figure 181a. Give a name in the Inspector to the image that will change.

Next, select the image you want to use as the trigger. Now assign a Set Image URL Action from the Image category of Actions to the image on the Mouse Enter event using the Actions palette.

Note

You may also use a text link or any element that accepts the name attribute as the trigger for Set Image URL.

From the Image pull-down, select the name you assigned to the first image you placed on the page and then use the Fetch URL tool to point to the image that will be used for the remote rollover (Figure 181b). Save the page and click Preview to test the Action.

Figure 181b. Choose the name of the image that will be swapped out in the Actions palette and then choose the alternate image.

Image Placeholders

When you create remote rollovers, it's important to use two images that are the same size so that you don't run into odd rendering flaws in some browsers. But what happens if you want to have a remote rollover in a part of the page that's empty? Just create a blank GIF placeholder image with the same dimensions as the remote rollover image. You can also try the ShowHide Action (see Tip 182).

If desired, you can create another Set Image URL Action and assign it to the Mouse Exit event. This controls what happens when you move the mouse pointer away from the trigger. Choose the remote image by its name and reassign the image to the original state with the Fetch URL tool.