Add interactivity with rollovers
Rollovers change the appearance of an image when triggered by a mouse action, such as a click. Self rollovers are the most common type of rollover: they cause changes to the trigger image alone. Remote rollovers change the appearance of an image elsewhere on a page. It’s fast and easy to create both types of rollovers in Adobe® GoLive® CS—and you won’t have to write even a line of code.
In this tutorial, you’ll create a remote rollover and a self rollover with two rollover states and an action. To complete the steps in this tutorial, you’ll need four images of identical dimensions, one of which should be an empty, transparent GIF image.
1. Create a self rollover.
Add an image in the Layout Editor to serve as the normal, or base, image. Click the Link tab in the Image Inspector and type http://www.adobe.com in the URL text box. In the Rollovers tab of the Rollovers & Actions palette, select Over and then click the Create New Rollover Image button. In the URL text box, drag the pick whip or browse to the image that will replace the normal image when a user mouses over it. Leave Preload selected, and then click the Preview tab in the document window to preview the rollover: roll the mouse over the button to see the effect of the rollover state you’ve created.
When you create rollovers, be sure to use images with identical dimensions—otherwise, GoLive (and Web browsers) will resize and may even distort the images. Preloading a rollover image downloads it before the rollover is enabled, ensuring that users don’t encounter a delay before the image appears (deselect Preload if you’re using an animated GIF for your rollover image—some browsers will start to play the animation immediately after preloading the file).
2. Add a down state and a status bar message to the rollover.
In the Rollovers tab of the Rollovers & Actions palette, select Down and then click the Create New Rollover Image button. In the URL text box, drag the pick whip or browse to the image that will replace the over image when the user presses the mouse button on the image. Next, select the Over state and click the Create New Message button. Type a message that will appear in the status bar of the Web browser when the user mouses over the normal image. Click the Preview in Browser button on the toolbar to preview the rollover in a Web browser: when you press the mouse button on the over image, the down image appears, and then the browser displays the Adobe Web page.
3. Attach an action to the rollover.
In the Layout Editor, select the normal rollover image. In the Actions tab of the Rollover & Actions palette, select Mouse Enter in the Events list and click the Create New Item button. Choose Others > Set BackColor from the Action menu. Click the lower right corner of the Background Color field and select a background color from the list of swatches that appears (choose another swatch set by selecting it from the list that appears beneath the color swatches). In the Actions tab, select Mouse Exit in the Events list and click the Create New Item button. Choose Others > Set BackColor from the Action menu, and choose the original background color of the page from the list of swatches. Preview the rollover in a Web browser: now, when you mouse over the normal image, the background color of the page changes—when you mouse away from the image, the background color reverts to the original color.
If you use rollovers and actions extensively in your Web pages, be aware that some older browsers (for example, Microsoft Internet Explorer versions prior to 4.0) don’t fully support them. To ensure that visitors to your Web page see content that’s appropriate for their browser, you can use a browser-switch script to detect the Web browser loading the page and automatically redirect viewers to an alternate page based on that browser. For more information about browser-switch scripts, see GoLive Help.
4. Set up a trigger and remote image object for a remote rollover.
Open a new page, and type placeholder text in the Layout Editor. Add an empty, transparent GIF image to the page (this is the remote image object: the image that will be replaced with another image when a user mouses over the text). Select the image, choose an option from the Name/ID menu in the Basic tab of the Image Inspector, and then type a unique name or ID for the image in the Name/ID text box.
Remote rollovers change images elsewhere on a page when a user performs a mouse action on a trigger object. Trigger objects for remote rollovers can be any HTML element, including text or other images. To use a remote rollover to display an object in a blank area of the page, use a transparent GIF as the remote image object. When the remote rollover is performed, the image appears from nowhere.
5. Create the remote rollover.
Select the text, and then select Over in the Rollovers tab of the Rollovers & Actions palette. Click the Create New Rollover Image button, and choose the name or ID of the remote image object from the Name/ID menu. In the URL text box, drag the pick whip or browse to the image that will replace the remote image object when a user mouses over the text. Click the Preview tab in the document window to preview the remote rollover: roll the mouse over the text to see the effect.
Rollovers are an easy way to add interactivity to your Web pages, and GoLive CS makes it fast and simple to create both self and remote rollovers. If you use Adobe ImageReady, you can even import ImageReady rollovers and add additional states to them in GoLive.
