Working with more rollover states

You can improve the usability of your Web pages by adding appropriate navigational hints for your readers. In this section, you’ll work on one of the auxiliary pages for the Architech Web site and create three different kinds of visual clues to help readers find information.

Creating a primary rollover state

So far, all the rollovers you’ve created have been secondary rollovers because the change appears outside the slice itself. This time, you’ll create an Over rollover state that directly affects the appearance of the slice itself.

1.	Choose File > Open, and select the team.psd file in the Lessons/Lesson 15/15Start/Architech folder. The new file is a page describing the Architech team. Some work has already been done for you, including the creation of some slices.
2.	In the Layers palette, select the Names Glowing layer set, and click the arrow to expand it so that you can see the dick glo, jayne glo, and sal glo layers nested in the layer set.
3.	In the Rollovers palette, select the dick_button slice and then click the Create Rollover State button () at the bottom of the palette. ImageReady creates and selects an Over State rollover under the dick_button slice.
4.	In the Layers palette, under the Names Glowing layer set, click to set an eye icon for the dick glo layer so that it is visible. (Leave the jayne glo and sal glo layers hidden.)
5.	Repeat steps 3 and 4 for the jayne_button slice, but click an eye icon () in only the jayne glo layer, leaving dick glo and sal glo hidden.
6.	Again repeat steps 3 and 4 for the sal_button slice, making only the sal glo layer visible in the Names Glowing layer set.
7.	Verify your results by selecting the Toggle Slices Visibility button () and the Preview Document button () in the toolbar, and then moving the pointer over the three names. If you’ve done this procedure correctly, each name glows when the pointer is over it and returns to normal view when the pointer moves away from the slice.
8.	In the toolbox, click the Toggle Slices Visibility button () and the Preview Document button () again to deselect them.
9.	Click the small arrow to collapse the Names Glowing layer set, and choose File > Save.

Creating a Selected rollover state

Ordinarily, users might expect that clicking a hotspot would jump the browser to a linked Web page. The Selected rollover state is especially useful when clicking the slice is not associated with a different URL.

1.	In the Rollovers palette, select the dick_button slice, and click the Create Rollover State button () at the bottom of the palette. ImageReady creates a Down State rollover for the slice.
2.	Double-click the new Down State rollover to open the Rollover State Options dialog box.
3.	In the dialog box, select the Selected option, and click OK. Now the new rollover shows that it is a Selected State rollover.
4.	In the Layers palette, click the small arrow to expand the Text Blocks layer set. Notice the eye icons: The Text Blocks layer set and the Team layer are visible. The other three layers are currently hidden. Note Although the thumbnails of the layers in the Text Blocks layer set look like identical transparent layers, they’re not. Each one contains white text, which is virtually impossible to see in these tiny images.
5.	Click the eye icon () to hide the Team_text layer, and then click the visibility option for the dick_text layer so that an eye icon appears there. Now the large text block on the right side of the image changes, showing placeholder text for a short biography about Dick.
6.	Repeat steps 1 through 5 for the jayne_button slice, but make only the jayne_text layer visible in the Text Blocks layer set.
7.	Again, repeat steps 1 through 5 for the sal_button slice, but make only the sal_text layer visible in the Text Blocks layer set.
8.	Verify your results by selecting the Toggle Slices Visibility button () and the Preview Document button () in the toolbar, and then clicking each of the three name slices. Then deselect those two toolbox buttons.
9.	Click the small arrow to collapse the Text Blocks layer set, and choose File > Save.

Adding alternate text

Alternate text appears under two different circumstances: when an image is not shown in the browser window, or when the user allows the pointer to hover over a hotspot. Either way, taking the trouble to add alternate text adds to the usability of your Web pages. You’ll add some alternate text to four slices in the Team.psd image.

1.	In the Rollovers palette, select the dick_button slice.
2.	In the Alt option in the Slice palette, type Read about Dick, our Chairman.
3.	In the Rollovers palette, select the jayne_button slice, and then go to the Alt option in the Slice palette and type Read about Jayne, our President.
4.	In the Rollovers palette, select the sal_button slice, and then go to the Alt option in the Slice palette and type Read about Sal, our Founder.
5.	In the Rollovers palette, select the Team_button slice, and then go to the Alt option in the Slice palette and type Read about our expert team.
6.	Verify your results by selecting the Toggle Slices Visibility button () and the Preview Document button () in the toolbar, and then letting the pointer hover for a few seconds over each of the four slices. Then deselect those two toolbox buttons.
7.	Choose File > Save.