Creating and editing rollovers

Creating slices for rollovers

You can quickly create layer-based slices for rollovers using the Rollovers palette. Layerbased slices are recommended when creating rollovers because the dimensions of a layer’s content may change in the course of creating a rollover, and layer-based slices automatically adjust to encompass the new pixels. For more information on the different types of slices, see “Creating and viewing slices” on page 368.

To create a layer-based slice for a rollover:

1Select the layer in the Layers palette. The content of the layer will define the active area for the rollover.

2Click the Create Layer-based Rollover button in the Rollovers palette.

By default, ImageReady adds an Over state to the new slice.

Creating rollover states

You can add a variety of different states to the slices and image maps in an image.

To add a rollover state to a slice or image map:

1 In the Rollover palette or the image, select the slice or image map you want to add the rollover state to.

Note: If slices are not visible in the Rollovers palette, select Include Slices and Image Maps in the Palette Options dialog box to display them. (See “Using the Rollovers palette” on page 398.)

2 Do one of the following in the Rollovers palette:

•Click the Create Rollover State button .

•Choose New Rollover State from the palette menu.

3Use the default rollover state assigned by ImageReady, or select a different rollover state. (See “Editing rollover states” on page 400.)

4Modify the layers used in the rollover state. (See “About working with layers in rollovers and animations” on page 396.)

Editing rollover states

When you create a rollover state, ImageReady assigns the type of state by default; however, you can easily change the state. You can also use the Rollovers palette to target the image content of a state for editing.

To edit the image content of a state:

1Select a state in the Rollovers palette. If necessary, expand the slice or image map to view its states. (See “Using the Rollovers palette” on page 398.)

2Modify the layers used in the rollover state. (See “About working with layers in rollovers and animations” on page 396.)

To edit the mouse action for a rollover state:

1 Do one of the following:

•Double-click a rollover state in the Rollovers palette.

•Select a rollover state in the Rollovers palette, and choose Rollover State Options from the palette menu.

2 Select a state, and click OK:

Over Activates the image when the user rolls over the slice or image map area with the mouse while the mouse button is not pressed. (Over is automatically selected for the second rollover state.)

Down Activates the image when the user presses the mouse button on the slice or image map area. The state appears as long as the viewer keeps the mouse button pressed down on the area.

Click Activates the image when the user clicks the mouse on the slice or image map area. The state appears until the viewer moves the mouse out of the rollover area.

Note: Different Web browsers, or different versions of a browser, may process clicks and double-clicks differently. For example, 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 singleor double-clicking. To ensure your Web page will function correctly, be sure to preview rollovers in various Web browsers.

Custom Activates the image of the specified name when the user performs the action defined in the corresponding JavaScript code. (You must create JavaScript code and add it to the HTML file for the Web page in order for the Custom rollover option to function. See a JavaScript manual for more information.)

None Preserves the current state of the image for later use, but does not output an image when the file is saved as a Web page.

Selected Activates the rollover state when the user clicks the mouse on the slice or image map area. The state appears until the viewer activates another selected rollover state, and other rollover effects can occur while the selected state is active. For example, a selected state for one button and an over state for another button can occur simultaneously. However, if a layer is used by both states, the layer attributes of the selected state override those of the over state.

Select Use as Default Selected State to activate the state initially when the document is previewed in ImageReady or loaded into a Web browser.

Out Activates the rollover state when the user rolls the mouse out of the slice or image map area. (The Normal state usually serves this purpose.)

Up Activates the rollover state when the user releases the mouse button over the slice or image map area. (The Normal state usually serves this purpose.)

Previewing rollover states

You can preview rollover effects directly in the ImageReady document window by switching to document preview mode. To preview the rollover effect in your computer’s default Web browser, click the Preview in Default Browser button in the toolbox. (See “Previewing an image in a browser” on page 53.)

To use rollover preview mode:

1 Do one of the following:

•Click the Preview Document button in the toolbox.

•Choose Image > Preview Document.

2 In the document window, perform the action that activates the rollover state. For example, position the mouse over the rollover slice or image map area to preview the Over state. Then click the slice or image map area to preview the Click state.

Note: If a document contains a Selected state, synthetic states are generated for the other states in the Rollovers palette. The synthetic state represents the appearance of the document when the Selected state is active. Synthetic states are generated automatically and cannot be edited.

To exit rollover preview mode:

Do one of the following:

•Select any tool in the toolbox.

•Click the Cancel button in the options bar.

Adding animation to rollover states

You can add a multiple-frame animation to a state in an image. Adding an animation to the Normal state will cause the animation to play when the image is loaded in a Web browser. Adding an animation to another type of state will cause the animation to play when a user activates the state.

To add animation frames to a rollover state:

1In the Rollovers palette, select the state in which you want to display an animation. If necessary, expand the slice or image map to view its states. (See “Using the Rollovers palette” on page 398.)

2Do one of the following to add frames to the animation:

•Click the Create Animation Frame button in the Rollovers palette or choose New Animation Frame from the palette menu.

Note: If the Create Animation Frame button and the New Animation Frame command are not visible, select Include Animation Frames in the Palette Options dialog box. (See “Using the Rollovers palette” on page 398.)

•Create frames in the Animation palette. (See “Creating and editing animations” on page 404.)

Applying and creating rollover styles

Rollover styles (indicated by a triangle in the upper left corner of the style thumbnail) simplify rollover creation by allowing you to turn a layer into a rollover effect with a single click. A rollover style includes all the attributes of a rollover, including its states and layer effects. When you apply a rollover style to a layer, the layer becomes a layer-based slice.

To apply a rollover style to a layer:

1Select a layer in the Layers palette.

2Choose Window > Styles, or click the Styles palette tab, to display the Styles palette.

3Click the thumbnail for the rollover style you want to apply. Rollover style thumbnails have a triangle in the upper left corner.