Rolling Over Effect in ImageReady

A rollover is an effect on a Web page that causes an image to change appearance when the mouse performs some action, such as passing over or clicking the image. For example, an image might reverse to show its negative version, pulsate with an eerie glow, or change appearance entirely (for example, a button’s text might change from OFF to ON when clicked). Rollovers are an excellent way to provide interactivity on a Web page. To create a rollover, you need to decide what you want your image to do in response to a particular mouse action. You then simply create versions of the image in the different states and have ImageReady provide the JavaScript instructions that tell the Web browser to switch between them at the appropriate time.

The Rollovers palette is no more. The new Web Content palette has replaced it, letting you create and specify options for your rollovers. The new palette also displays slices, image maps, and animation frames. You can create a rollover effect in ImageReady by following these steps:

1. Open an image to be used with a particular rollover effect.
2. Define the area you want to use for the rollover by creating a layer-based slice or an image map.
3. In the Web Content palette, choose New Rollover State from the palette pop-up menu (access the menu by clicking the triangle in the upper right of the palette).
The rollover specifies what mouse action activates that particular state or appearance. For example, the default is Over (the mouse cursor passes over the image). But you can select different rollovers such as Down (the visitor presses the mouse button down), Up (the visitor releases the mouse button), Click (the visitor clicks the area with the mouse), Out (the visitor takes the mouse cursor away from the image area), and so on.
4. In the Web Content palette, select the state and edit the content for the state to create the rollover effect.
You want to create the different state, or appearance, that will appear when the mouse action activates the rollover. For example, if you want a button to flip between OFF and ON, you need to have two states (on separate layers), one for the normal, ON state and one for the OFF state. In my example, a glow appears when my mouse cursor moves over the text.
5. Click the Preview button (a pointing finger with an small starburst) in the Tools palette to view your rollover.
ImageReady creates JavaScript instructions for you that you can incorporate into your Web pages to use these rollover effects with your images.