friendsterTalk - Friendster Forum

Creating rollovers

A rollover is a button or image on a web page that changes when the mouse is over it. To create a rollover, you need at least two images: a primary image for the normal state and a secondary image for the changed state.

Photoshop provides a number of useful tools for creating rollover images:

Use layers to create primary and secondary images. Create content on one layer, then duplicate the layer and edit it to create similar content while maintaining alignment between layers. When creating a rollover effect, you can change the layer’s style, visibility or position, make color or tonal adjustments, or apply filter effects.

You can also use layer styles to apply effects, such as color overlays, drop shadows, glow, or emboss, to the primary layer. To create a rollover pair, turn the layer style on or off and save the image in each state.

Use preset button styles from the Styles palette to quickly create rollover buttons with normal, mouseover, and mousedown states. Draw a basic shape with the rectangle tool and apply a style, such as Beveled Normal, to automatically turn the rectangle into a button. Then copy the layer and apply other preset styles, like Beveled Mouseover, to create additional button states. Save each layer as a separate image to create a finished rollover button set.

Use the Save For Web & Devices dialog box to save rollover images in a web-compatible format and with an optimized file size.

When you save rollover images, use a naming convention to distinguish the primary (non-rollover state) image from the secondary (rollover state) image.

After creating a rollover image set in Photoshop, use Dreamweaver to place the images on a web page and automatically add the JavaScript code for the rollover action.