- 1). Create a single image containing both the original and rolled-over states. For example, the image used to create a roll-over button would include both the regular button and how it looks when the user passes their mouse over it. Put the original button on top and place the rolled-over button directly beneath that. Trim the image so there is no blank space surrounding it. Save your image in a browser-friendly format, such as .PNG or .GIF.
- 2). Add a class to any HTML tag you want to associate with the rollover. In the case of a button, you would add the class to the appropriate anchor tags. Code for this would look like "<a href="/links/?u=link_address">Link Text</a>." Name the class whatever you like, but keep it memorable.
- 3). Set the rollover image as the background for the class you added. This is done in the stylesheet, either on the page or in a separate CSS file. The code for this might look like ".rollover {background: url(rolloverimg.png);}".
- 4). Add a second CSS rule for when the element is hovered over; this will trigger the rollover. In this rule, shift the background upward by the number of pixels equal to the height of the rollover image divided by two. Make this number negative. An example of code for this rule is ".rollover:hover {background: 0 -40px;}". This code pushes the background up 40 pixels above the element, where it cannot be seen.
- 5). Open up the HTML file containing your rollover effect and test the rollover by passing your mouse over it. Fix your code and check the rollover image location if anything looks wrong or does not appear.