Task 10 How to Build JavaScript Rollovers

Rollover animations are graphics that change as you pass the mouse over a specific spot onscreen. These animations are useful for emphasizing links, especially in graphics that might not be clearly marked. Rollovers consist of a normal state, mouse-over state, and click state, so this task creates a separate image variation for each state. To explain the rollover effect, this task creates a basic button and then changes the state of the button. After you create the button and its three states, you must save the HTML code as well as the graphics and then paste the code into the target web page.

1. Create a New ImageReady File

In ImageReady, select File, New to open the New Document dialog box so you can create a new file. For this task, specify a width of 340 pixels and a height of 240 pixels for the image size; then select the White radio button. Click OK.

2. Create the Button

Make a new layer, select the Elliptical Marquee tool, and Shift+drag within the image to draw a circle the size of the final button. Select Edit, Fill and fill the button shape with black.

3. Add the Layer Effect

To give the button a 3D effect, select Window, Styles to open the Styles palette. Then click the Green Gel style. This action automatically assigns predesigned layer styles to the active layer.

4. Make Layer Duplicates

From the Layers palette menu, select Duplicate Layer to copy the button and its effects. Select Duplicate Layer again to create a total of three layers, each of which shows the same button and styles.

5. Color the Layers

In the Layers palette, select the Layer 1 Copy layer and double-click the Color Overlay style to open the Layer Style dialog box. Click the color swatch to open the color picker, select a new color, and click OK to accept the color. Click OK again to accept the style change. Go back to the Layers palette and select the Layer 1 Copy 2 layer and repeat this step, selecting a different color.

6. Create Rollover States

Select Window, Web Content to open the Web Content palette. Select New Rollover State from the palette menu to create a new rollover state called Over. Select New State again to create another new rollover state called Down. You now should have a total of three states: the Normal state and two rollover states labeled Over and Down. (And, unbeknownst to you, ImageReady is creating the JavaScript code to make all this work!)

7. Assign Layers to States

In the Web Content palette, select the Normal state; in the Layers palette, select the layer that shows the color you want the button to be in its normal state. Repeat this for the Over and Down rollover states. Select File, Save Optimized to save the file, making sure that Format, HTML and Images is selected.