Working with Rollovers in ImageReady

A rollover is a mini animation that is triggered by your mouse. Rollovers add interactivity to your Web page. An example would be a button which changes shape or color when the cursor passes over it. In this section you ll learn how to create and change rollover states in ImageReady.

Creating Rollover States

Like animations, rollovers depend on layers for their behavior. You designate a rollover on an image by changing the visibility of a layer s content. To create a rollover, you should slice your image or create an image map so that the portion that contains the rollover is independent from the rest of the image. Follow these steps:

1. In ImageReady, open the file Bio_rollover.psd from the ch26 folder on the CD. To simplify the process, I have merged all the layers in the document except for the ones needed for the rollover. The Background and the Legs layer are visible, as shown in Figure 26.9.

   
   Figure 26.9: The Background and the Legs layer are visible.

2. Choose the Slice tool and drag a rectangle over the lower-right corner of the image to slice the beetle. Other slices will also be displayed. The beetle is the slice you want, so click it with the Slice Select tool, accessible by expanding the Slice tool in the Tool palette. It will be numbered Slice 03, as you see in Figure 26.10.

   
   Figure 26.10: The document showing the beetle slice

3. Choose Window ’ Web Content to display the Web Content Rollovers palette. It contains a layer for the new slice, a thumbnail of the entire image, named Normal, and a thumbnail of the slice, named Bio_rollover_03 . This thumbnail displays the Normal, nonanimated, appearance of the slice. Rollover states will appear on new sublayers beneath it.

4. Target Bio_Rollover_03 . Click the New Create Rollover State icon. A thumbnail appears beneath the Bio_Rollover_03 layer, in the Rollovers palette, named Over State. Click off the visibility indicator next to the Legs layer, and click on the indicator next to the Legs 2 layer, as in Figure 26.11.

   
   Figure 26.11: The Layers palette and the Rollovers palette

5. To see the rollover, choose File ’ Preview In and choose a browser. Place your mouse on the beetle, and the legs move. Remove the mouse, and the legs are restored to the Normal state.

6. When the rollover is complete, you can optimize the image slice by slice. Choose the Slice Select tool from the Tool palette, click the individual slices one by one, and optimize them individually with the Options palette.

7. Save the entire page as an HTML document: choose File ’ Save Optimized ’ HTML And Images.

Changing Rollover States

You can program other states into a rollover and create additional rollover frames . The rollover might be triggered by the viewer pressing (or releasing) the mouse button, by moving the mouse over it, or by moving the mouse off of it.

Control-click (Mac) or right-click (Win) the name of a rollover state, and choose a different rollover state from the Set State pop-up list.

The Rollover State Options list (see Figure 26.12) gives the following State options:

Figure 26.12: Rollover State Options

Normal The image doesn t change; this is the default, or nonanimated, state.

Over The state changes when the mouse is hovered over the image or slice. Over is the default setting for the first rollover state.

Down The state changes when the mouse is clicked and held down in the area.

Selected This option implements a rollover state when the user clicks the mouse on the slice or image map area. The state is maintained until you activate another selected rollover state, and other rollover effects can occur while the selected state is active. Note that if a layer is used by both states, the layer attributes of the Selected state override those of the Over state.

To activate a state initially when the document is previewed in ImageReady or loaded into a Web browser, double-click on the name of the rollover state and check Use as Default Selected State.

Out The state changes when the mouse is moved off the area.

Up The state changes when the mouse is released within the area.

Click The state changes when the mouse is clicked and released over the area.

Web browsers, or different versions of a browser, might process clicks and double-clicks differently. Some browsers leave the slice in the Click state after a click, and in the Up state after a double-click; other browsers use the Up state only as a transition into the Click state, regardless of single- or double-clicking. Be sure to preview rollovers in various Web browsers.

Custom This option lets you enter a custom behavior. You must write JavaScript code and add it to the HTML file in order for this to work.

None The state does not change.