Photoshop

How to make Rollovers

Rollover animations are graphics that change as you pass the mouse over a specific spot onscreen. These animations are useful for emphasizing links, especially in graphics that might not be clearly marked.

Rollover animations are graphics that change as you pass the mouse over a specific spot onscreen. These animations are useful for emphasizing links, especially in graphics that might not be clearly marked. Rollovers consist of a normal state, mouse-over state, and click state, so this tutorial creates a separate image variation for each state.

An image rollover is basically two different images. One is displayed after the page loaded up, the other one is displayed only when the user moves his mouse over the first one. Image rollovers are often used for a site's interface.

In this tutorial we'll create a JavaScript Image RollOver using ImageReady and Photoshop.