Rollovers are changes in the appearance of buttons depending on the current mouse state.  For instance, when you pass the mouse point over a button you are rolling over it.  To highlight the fact that you are rolling over it you can have the button change, such as the color of the text.  When you {Click} on the button another version or change in appearance can occur.  ImageReady automatically generates the HTML file, with JavaScript , to make this happen.  You use the Rollover Palette to create different Rollover States or Thumbnails , modifying the look of the buttons in their various states, just like GIF animation, by making changes with the Layers  Palette .  Changes you make with the Layers Palette are reflected in the currently selected Rollover State.  Once you have completed making different Rollover States, you optimize the image accordingly.  Keep in mind that each Rollover State is actually an individual image so you have to add the file size of each State to determine final file size for the Rollover effect you build.

Rollover Palette
The Rollover Palette consists of Rollover States, a New State button, a Trashcan button, a Selection drop-down, and a State drop-down list (Over, Down, Click, Out, Up, Custom, None.)

Rollover State
The Rollover State contains the current state of the image.  Any modifications you make with the Layers  Palette  are reflected in the currently selected State, much like the Animation  Thumbnails  in the Animation Palette .  The first Rollover State is always Normal, meaning the appearance of the button in its regular state, when there is no mouse activity.

The Rollover Palette

State Drop-Down List
Select from the State drop-down list to designate what mouse state activates the contents of the current Rollover State.

Over: the mouse pointer is over the button.
Down: the user has {Clicked} the button.
Click: the user has {Clicked} the button and the appearance of the button remains until another mouse event occurs.
Out: the user, having moved the mouse pointer over the button has moved it away or out from the button.
Up:  the user has {Clicked} and {Released} the mouse button.
Custom: Select Custom to make your own Rollover State.  You must script it yourself with JavaScript .
None:  Selecting None will not generate an image for the current Rollover State.

State
Add a New State by {Clicking} the New State button.  Move States around by {Clicking}, holding, and dragging until you see a black drop-bar.  Release the mouse button.  Remove States by {Clicking} and dragging the State to the Trashcan icon and releasing the mouse button.

Select Drop-Down
Use the Select drop-down to select slices.

Add a new Rollover State by {Clicking} on the New State Button  in the Rollover Palette.  If the New State Button is unavailable (ghosted) then {Click} the Select Slice drop-down at the bottom of the Rollover Palette and select Normal.  By default, the state of the image as it is in the preceding State occupies the new State.  Over is the default mouse event for the second State.

If you were to select the Type “contact” Layer  and change its color using the Foreground Color it would change in both the Normal and Over State s because you made the change outside of the Layers  Palette .  We need to change the color of the Type to black.  To do so, duplicate the “contact” Type Layer.  Make the original invisible.  Modify the copy by changing its color to black.  Notice that the Normal State displays white Type and the Over State displays black text.  We also want to remove the Drop Shadow  when the button is rolled over so duplicate the Shape  Layer.  Make the original invisible.  Modify the copy by removing the Drop Shadow.

You’ll also notice a Slice Box around the image indicated by a “01” and a mouse pointer in a small box.  ImageReady generates all HTML and JavaScript  by using Slices .  We will cover Slices later.

Select File/Save to save a Photoshop  version of the image.

Select File/Save Optimized  As to save the GIF version of the buttons and the HTML file associated with them.  The Save Optimized dialog box has additional options, including Save as Type, Output settings, and a Slice Export drop-down menu with options to Save All Slices  and Save Selected Slices Only.

Saved Optimized As dialog box

{Click} on the Output settings button and select HTML from the drop-down menu.