Image Rollovers With CSS

In this tutorial you will learn how to make an CSS rollover effect.

Most of you saw how this effect looks like. When you pass over a, in this case graphic button,

it changes shape,color,text…

It’s not necessary to use a graphic object in this effect, but for purpose of this tutorial I will use a graphic button.

First, you need to create a graphic object which you will use for this effect. You can even use mine if you want to.

This graphic object contains 2 buttons which we will use as a normal state and mouse over state.

They are saved in one file.

Dimensions 80×50 pixels

Why do we use one graphic file instead of two?

Well, if you use two graphic files, one for each state (mouse over, normal), this effect gets a bit slower because one graphic, which shows as a normal state

loads at the first page loading, while the other graphic (mouse over state) loads when we pass with our mouse over our button.

This is not so practical.

But, if we use one graphic file with both states, it loads at the first page loading for both states. That’s why this is quicker and hence better.

Ok. Now lets start coding.

Insert this into your CSS file

#button a {   

display: block;   

background:  url(rollovergraphic.gif) top;   



width: 80px;   



height: 25px;   



}

#button a:hover {   

background:  url(rollovergraphic.gif) no-repeat bottom;   

}

Insert this where you want display the rollover button:

<div id="button"><a href="#"></a></div>