Getting to Know Rollovers






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, a drop shadow appears.

    Click To expand
    Figure: Changing the image area.

  • Substitute one image for another. In Figure, a new image is substituted for the original image.

    Click To expand
    Figure: Substituting a new image for the original image.

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

    Click To expand
    Figure: 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.)

Remember 

In version 7 of ImageReady, rollovers were created by using the Rollover palette. With ImageReady cs, the Rollovers palette is gone and the new Web Content palette has all the functionality of the old Rollovers palette. So, to create rollovers in ImageReady cs, you use the Web Content palette to assign rollover states and the Layers palette to hide and display layers.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows