Rollover Navigation

Make a matched set of working rollover buttons in ImageReady the easy way, by creating and applying a rollover style.

1.	Set Up Your Workspace Open the ImageReady palettes you'll use to create rollover buttons in this navigation bar—the Web Content, Styles, and Layers palettes. Click the Styles tab and drag the Styles palette away from the Web Content palette so you can see them both. Make sure you've loaded the HTWWeb-Styles preset into the Styles palette, as explained in the Introduction. Create a Layer-Based Rollover TIP Create Rollovers in ImageReady. You can make artwork for rollover buttons in Photoshop, but when it's time to add rollover functionality, switch to ImageReady. Of the two programs, only ImageReady can write JavaScriptcode behind the scenes to make your rollovers work. The default Normal state of an image is the way the image looks when it first loads in a Web browser. If you add an Over state, the appearance changes when a viewer mouses over a trigger area that's defined by a slice. Start by simultaneously creating a slice and an Over state for Button1. You have to use layer-based slicing because that slicing method is a prerequisite for creating rollover styles. Select the Button1 layer in the Layers palette A. Then click the Create Layer-Based Rollover icon at the bottom of the Web Content palette B. This generates a layer-based slice around the content of the Button1 layer C and an Over state for that slice, both listed in the Web Content palette. Rename the Slice Give your new slice a more manageable name by double-clicking its default name in the Web Content palette and typing btn1 A, or by changing its name in the Slice palette B. Change the Look of the Over State Next you'll change the appearance of the sliced button in the Over state by applying a style. Other ways to change the appearance of a rollover graphic are to vary its position, opacity, layer blending mode, or layer visibility.  Select the Over state of the btn1 slice in the Web Content palette A. Then click on the 01_roll_over style in the Styles palette to change the button's color and effects in the Over state C. (If the HTWWeb-Styles aren't accessible in your Styles palette, choose a different style.) Preview the Over State Click the Preview button in the toolbox, and move your mouse over the first button in the image to see the Over state in action. Click the Preview button again to exit preview mode. CAUTION Exit Preview Mode. After previewing a rollover in ImageReady, you must click the Preview button again to exit preview mode, or you'll be unable to perform other program functions.
6.	Add a Down State A rollover can have multiple states. Next you'll add a Down state to this rollover button. The Down state occurs in a Web browser when a viewer clicks and holds on an area defined by a slice. TIP Changing States. States are applied in a default order (Over, Down, Selected, Out, Up, Click), but you can change a state to another at any time. Double-click a state in the Web Content palette. In the Rollover State Options palette that opens choose another state and click OK. With the Over state of the btn1 slice selected in the Web Content palette, click the Create New Rollover State icon at the bottom of that palette A. The new Down state B starts out looking just like the Over state. Change the Look of the Down State With the Down state selected in the Web Content palette A, change the appearance of the button again by clicking the 01_roll_down style in the Styles palette B. Preview the Down state by activating the Preview button in the toolbox, and clicking and holding the first Link button in the image C. Exit preview. Create a Rollover Style Now you'll save all the states of your rollover as a reusable rollover style. With the Button1 layer selected in the Layers palette A, click the Create New Style icon at the bottom of the Styles palette B. In the Style Options dialog box that opens, make sure Include Layer Effects, Include Blending Options, and Include Rollover States are checked to retain all the content and functionality of your original rollover C. Name the style 01_triple_roll, and click OK. The style appears in the Styles palette with a black triangle, which indicates that it's a rollover style rather than a static style D. Apply the Rollover Style to Button2 Now you'll reap the rewards of your hard work. It's quick and easy to create a set of matching rollover buttons by applying the rollover style to the other two buttons in this navigation bar. Select the Button2 layer in the Layers palette A. In the Styles palette, click the new rollover style 01_triple_roll B. This creates a layer-based slice around the content of the Button2 layer C, generates an Over state and a Down state for this slice along with the JavaScript to make the states function, and changes the appearance of the button on each state—all with a single click. Click the triangle next to the new slice in the Web Content palette to see the rollover states for the new slice D. Double-click the slice name and rename this slice btn2 E. Apply the Rollover Style to Button3 Repeat the preceding step with the Button3 layer selected to complete your set of rollover buttons. Rename the resulting slice btn3. Preview in a Web Browser Click the Preview in Browser button in the toolbox to test your rollovers in your default Web browser. Optimize and Save Optimize each slice for fast download using the settings in the Optimize palette. When you optimize a slice, you affect all states of its rollover, so check the appearance of all three states of the rollover buttons. Choose File>Save Optimized As. In the Save Optimized As dialog box, set Format to HTML and Images A so that ImageReady generates an HTML file containing the JavaScript that will make your rollovers function. (If you prefer to create rollovers in a site-building program or write your own JavaScript, choose Format: Images Only.) In addition, the program creates an Image folder in which it saves GIFs and JPEGs from the slices and rollovers in the source file B. Choose File>Save to resave the PSD file with all of the slicing and rollover information you've added.
13.	Open the HTML File in a Browser Open the saved HTML file in a Web browser to see the results of your work. Each button should change appearance when you mouse over it and when you hold it down.

In this tutorial:

1. Creating Stylish, User-Friendly Navigation
2. Critical Skills
3. Rollovers
4. Image Maps 
5. Starting New File for Web 
6. Building Navigation Bar 
7. JPEG Optimization Settings 
8. GIF Optimization Settings
9. Slicing and Optimizing Navigation Bar
10. Slice Options
11. Transparent Buttons 
12. Rollover Navigation 
13. Pointers and Remote Rollovers 
14. Image Map Navigation