Creating remote rollovers
This tutorial will show you how to easily create remote rollovers in GoLive, using the GoLive Actions. To learn about rollovers that replace the image the mouse is hovering over, please see the Conventional Rollovers Tutorial.
Remote rollovers require a trigger and a target. A trigger can be text, an image, or even a Conventional Rollover. This tutorial uses GLH's navigation bar as an example on how to change one image when the mouse hovers over another.
In GoLive, place both the trigger and the target on your page. In this example, the News image is the trigger and the black Status image is the target.
Select the target image. Name it by filling in the Name field in the Spec tab of the Image Inspector.
Select the trigger image. Use the Link tab of the Image Inspector to make it a link. Enter the URL or choose a file. If you don't want your rollover to lead anywhere, enter "#" into the URL field.
In the Action tab of the Image Inspector, add a Mouse Enter action, choosing Set Image URL from the Action > Image popup menu. Select the target image's name from the Image popup menu. Choose the image you want to replace the target with.
Now add a Mouse Exit action. Choose Set Image URL from the Action > Image popup menu. Select the target image's name from the Image popup menu. Choose the original target image.
Here's the completed remote rollover:
Remember that the target and the image which will replace it need to be the same pixel size. Also, the image which appears over the target 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!
[05/04/99] - Several users have sent e-mail both to the list and to me personally asking how to make a rollover effect that changed both the image itself and another image on the page. This is easy to do, just make a Conventional Rollover and use that Action Tab in its inspector to trigger the other image. An alternative method is to use the same procedure as is described in this tutorial, but adding TWO Set Image URL actions on Mouse Enter instead of one. Set the image itself as the target [remember to name your image] for the second action. This will accomplish the effect you're looking for. |
