Creating a CSS Rollover with Images

There are many diferent ways to create a rollover or to have a fancy effect when you hover your mouse over a button or an image. The thing that you need to consider is which is the best way. The user is not going to want to wait for something complex to load, they are going to want it to rollover now. So the question is what is the best way to achieve this and in the quickest amount of time possible along with the rollover effect seeming natural. The easiest way for a browser to do this is through the use of css pseudo selectors.

Psuedo selectors are selectors based upon an action or some type of input from the user. There are a handful of selectors out there. Some that will activate when a link is selected or clicked, and others that activate when your mouse hovers over an element such as text or an image. We are going to focus on the following selectors: a:hover and a:active.

We will be using three basic images for this tutorial:

button.png

button-hover.png

button-active.png

Essentially what we'll be doing is creating a background image as the static image, button.png, and then when our mouse hovers over the element, it switches out the static background image and replaces it with whatever image is affixed to the a:hover selector. In this case it is going to be button-over.png. When the element is clicked it will use the a:active selector and replace that image with the button-active.png.

To create the hover effect you will want to use the following in your css:

#menu a {
   background: url("button.png") top left no-repeat;
}
#menu a:hover {
   background-image: url("button-over.png");
}
#menu a:active {
   background-image: url("button-active.png");
}

By using this method to display your rollovers, you will be able to increase the performance that your Web site has, and your fancy rollovers will appear with very little delay if any.

There are some more advanced CSS techniques that will make your rollovers load even quicker when a user hovers or clicks on the button.