Photoshop CS Timesaving Techniques For Dummies [Electronic resources] نسخه متنی

Getting to Know Rollovers

If you’ve surfed the Web, no doubt you’ve seen rollovers. When your mouse passes over a button or a hotspot on a Web page, the appearance of the graphic changes. For instance, a button changes from gray to another color, or a light bulb appears to turn on. These rollovers are created by using rollover states.

The six rollover states are associated with the six actions that a mouse can perform. The mouse actions work as triggers, activating the rollover state. The six rollover states are

Over: Activates when the user passes the mouse over a slice or image map area. In the Over state, the mouse button is not pressed.

Down: Activates when the user clicks and holds down the mouse button over a slice or image map area. This state is active as long as the user keeps the mouse button pressed down and doesn’t release it.

Click: Activates when the user clicks the mouse button while the mouse is over a slice or image map area.

Selected: Activates when the user selects a slice or image map area. The rollover remains active until the user selects another slice or image map area. For instance, a button changes color because the user selects it. The button doesn’t change back to its original color until the user selects another button.

Out: Activates when the user moves the mouse out of the slice or image map area.

Up: Activates when the user releases the mouse button while the mouse is over a slice or image map.

The default sequence of rollover states that ImageReady assigns is Over, Down, and Click. First, the user passes the mouse over the slice or image map, activating the Over state. Then, the user presses the mouse button down, activating the Down state. Finally, the user releases the mouse button, triggering the Click state.

You can use the following three ways to create rollovers by using rollover states:

Change an image area. For instance, a color changes or a drop shadow appears. In Figure 59-1, a drop shadow appears.

Figure 59-1: Changing the image area.

Substitute one image for another. In Figure 59-2, a new image is substituted for the original image.

Figure 59-2: Substituting a new image for the original image.

Make text or another image appear in a different area of the browser window. In Figure 59-3, text appears in a nearby area of the browser window.

Figure 59-3: Making text appear in a different area of the browser window.

To create a rollover, an image must be divided into slices first. Only user slices and layer-based slices can be assigned rollover states. If ImageReady has automatically generated auto slices surrounding an area that you want to use in a rollover, you need to convert the auto slices to user slices by using the Slices>Promote to User Slices command. (To find out more about creating slices and converting them, turn to Technique 56.)