jbagley
January 9 '06, 06:47 AM
Traditionally, image rollovers always had the problem of the first time you moved your mouse over the link, the rollover image had to load, thus creating a lag. Along came the javascript preloader which preloaded the images for you, but that created alot of clunky javascript code, much of it un-needed. Roll on CSS!
Creating an image rollover with CSS isn't as difficult as you might think. Let's start with some simple HTML.<div class="rollover">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>All it is are 2 links inside a div. The div has a class attribute called 'rollover'.
We then need the image that we are going to use as the rollover. Attached, find the button.gif image. The way CSS rollovers work is that it will display the top part of the image as the normal link state, and display the bottom half of the image as the hover state. Now we are going to need some CSS to get this to work..rollover a {
display:block;
width: 100px;
height: 25px;
padding-left: 35px;
padding-top: 5px;
background: url("button.gif") 0 0 no-repeat;
font: bold 13px Verdana;
color:#fff;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -30px;
color: #B4DE18;
}Just a couple of things to note:
The button I used was 100px by 30px. The final image(button.gif) used is 100px by 60px. If you have alook at the button.gif, you will see that the normal state in the top half, and the hover state in the bottom half.
As you can see I used padding for the link text. The height: 25px was the result of the image(30px) less the padding-top: 5px.
Heres an demo of the CSS image rollover (http://www.jasonbagley.com/CSSrollover/). This CSS image rollover works in both Firefox 1.5 and Internet Explorer 6.0
Have fun!
Creating an image rollover with CSS isn't as difficult as you might think. Let's start with some simple HTML.<div class="rollover">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>All it is are 2 links inside a div. The div has a class attribute called 'rollover'.
We then need the image that we are going to use as the rollover. Attached, find the button.gif image. The way CSS rollovers work is that it will display the top part of the image as the normal link state, and display the bottom half of the image as the hover state. Now we are going to need some CSS to get this to work..rollover a {
display:block;
width: 100px;
height: 25px;
padding-left: 35px;
padding-top: 5px;
background: url("button.gif") 0 0 no-repeat;
font: bold 13px Verdana;
color:#fff;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -30px;
color: #B4DE18;
}Just a couple of things to note:
The button I used was 100px by 30px. The final image(button.gif) used is 100px by 60px. If you have alook at the button.gif, you will see that the normal state in the top half, and the hover state in the bottom half.
As you can see I used padding for the link text. The height: 25px was the result of the image(30px) less the padding-top: 5px.
Heres an demo of the CSS image rollover (http://www.jasonbagley.com/CSSrollover/). This CSS image rollover works in both Firefox 1.5 and Internet Explorer 6.0
Have fun!