Creating Rollovers

Basics	Image Maps	Slices	Rollovers	Animation

Introduction	Introduction	Introduction	Introduction	Introduction
Jumping	Creating	Creating	Creating	Working with Frames
File Formats	Modifying	Modifying	Previewing	Working with Layers
Optimization	Image Map Palette	Slice Palette	Matching Layers	Animation Palette
Saving				Saving Animations

How do I
create a rollover?

Rollovers are created in a simple process:

1) Define the rollover areas. Create the necessary image maps or slices. (See the sections on Image Maps and Slices for details.)

2) Go to the Rollover palette. Pull down the Window menu and select Show Rollover to view the Rollover palette.

The palette shows you a thumbnail of the Normal state for the image. Beneath that thumbnail is a small pull-down menu which currently says "Entire Image":

This pull-down menu lists all of the image map areas or user slices you have defined (we'll call these "rollover areas").

3) Select a rollover area. Pull down the Rollover Area menu and select the one you want to add a rollover effect to. If you gave each area a name in the Image Map or Slice palettes, those names appear in the menu; otherwise you will see the non-descriptive names assigned by ImageReady:

4) Create a new rollover state. Click on the New State button at the bottom of the Rollover palette:

A new thumbnail representing the new state will appear next to the first.

5) Assign a mouse action to the new state. Above the new thumbnail you can see the mouse action that is currently associated with the new state. The default is "Over".

If you want a different action, click on the default and choose a different one from the menu that pops up:

over—state occurs when the mouse rolls over the current rollover area
click—state occurs when the mouse is clicked while over the current rollover area
down—state occurs when the mouse button is pressed down while over the current rollover area
out—state occurs when the mouse rolls out of the current rollover area
up—state occurs when the mouse button is released over the current rollover area
other—you can write your own JavaScript

6) Show the Layers palette. If the Layers palette is not already visible, pull down the Window menu and select Show Layers.

7) Make the graphical effect for the rollover. Using the Layers palette commands and options, you can create several types of rollover effects. You can:

hide or show a layer
change or add layer styles
move a layer
change a layer's opacity
change a layer's blending mode

However, be aware that changes you make using painting and editing tools, color and tone commands, filters, type, and other image-editing commands, will have a universal effect on the layer, rather than applying to just the selected rollover.

8) Select the Normal state. When you're done, click on the Normal thumbnail to make sure that you don't inadvertently make other changes to your rollover effect.

Important Tip! When you are creating your graphical effect, be sure you have selected:

the right rollover area in the Rollover palette
the right state
the right layer in the Layers palette

If you don't, you will often get surprising and undesired results!

How do I
delete a rollover?

To delete a rollover state, be sure you have the correct rollover area selected in the Rollover palette pop-up menu, then click on the state you want to delete. Click on the Delete State button at the bottom of the Rollover palette:

To delete all states in a rollover, be sure you have the correct rollover area selected in the Rollover palette pop-up menu, then choose the Delete Rollover command from the Rollover palette menu:

Some examples

try me!

In this section we'll give you a couple of simple rollover effects to try yourself.

Buttons That Indent When Rolled Over
In Photoshop, create two layers. On the lower layer, make a circular selection the size of a button. Fill it with the color you want for your button. On the upper layer, make another circular selection, a little bigger than half the size of the first. Fill the second circle with the same color. Position the smaller upper circle so that it is over the larger circle, and they make two concentric rings. Give both layers an Inner Bevel layer effect with a direction of "Up". (It should look something like the button in the left column. You might want to play with Inner Bevel settings to get the exact look you want.)

Now switch over to ImageReady using the button in the Toobox. Draw a circular image map area over the button. In the Rollover palette, select the rollover area. Create a new state and set the mouse action to "Over". With the new state still selected, in the Layers palette select the upper layer, then click on the Layers Style icon at the bottom of the Layers palette and select Bevel and Emboss. In the Bevel and Emboss palette that appears, set the direction to "Down". The Over rollover state should now look something like the button to the left when you're pointing at it with the mouse. Finally, click on the Normal state in the Rollover palette. You're done!

Tip: In the exercise above, we created our graphic and our two separate layers in Photoshop before we moved to ImageReady. Why?

There are two reasons. First, in general Photoshop is a lot faster than ImageReady, and so you can be more efficient that way. Secondly, if you're making a lot of changes to layers in ImageReady, it is easy to have different layer states assigned to different rollovers by mistake. You avoid some of these issues by doing the majority of the graphics work within Photoshop.

P.S. If you make a universal change to your graphic in ImageReady, be sure to select Entire Image from the Rollover Area menu in the Rollover palette first.

Hiding and Showing Layers
In Photoshop, create two layers. On one layer, type "Please point to me with your mouse." Format it as you like. On the other layer, type "Ouch!" Position the layers so that both sets of words are directly on top of one another. Hide the layer with the word "Ouch."

Now switch over to ImageReady using the button in the Toobox. Make a slice over the "Please..." text. In the Rollover palette, select the rollover area. Create a new state and set the mouse action to "Over". In the Layers palette, Hide the layer with the "Please..." text, and Show the layer with the "Ouch" text. Finally, click on the Normal state in the Rollover palette. Voila!