Creating Rollover Effects with CSS Sprites - Creating rollover buttons with CSS: a traditional approach
(Page 2 of 4 )
Before I delve more deeply into creating rollovers using CSS sprites, let me introduce a simple and straightforward example. In this case, a rollover button is constructed by utilizing a conventional CSS approach. By going through this example, it'll be much easier for you to spot the differences when I explain the CSS sprite-based technique.
Having explained the steps that I'll follow from this point onward, take a look at the following background images, which will be used in this example to create the basic rollover button that I discussed earlier:
Naturally, each one of the above pictures corresponds to a particular stage of the link where the rollover will be displayed. The first image will be visible for the a:link subclass, then the second one will belong to the a:visited stage, and finally the third and fourth ones will be visible for the a:active and a:hover subclasses respectively.
As demonstrated by the set of images that you saw above, the logic that drives the rollover button is really simple to understand. As I said before, every picture corresponds to a specific stage of the button, therefore considering that the previous group of images speaks for itself, a simple example that implements this rollover button could be coded as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rollover Buttons using CSS</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
ul{
display: block;
width: 150px;
height: 25px;
margin: 0;
padding: 0;
background: #fff url(button1.gif) 0px 0px no-repeat;
}
li{
margin: 0;
padding: 0;
font: normal 12px Arial, Helvetica, sans-serif;
color: #00f;
overflow: hidden;
list-style: none;
}
li a{
display: block;
width: 150px;
height: 25px;
margin: 0;
padding: 0;
background: #fff url(button1.gif) 0px 0px no-repeat;
text-align: center;
text-decoration: none;
}
li a:link{
color: #000;
background: #fff url(button1.gif) 0px 0px no-repeat;
}
li a:visited{
color: #00f;
background: #fff url(button2.gif) 0px 0px no-repeat;
}
li a:hover{
color: #c90;
background: #fff url(button4.gif) 0px 0px no-repeat;
}
li a:active{
color: #f00;
background: #fff url(button3.gif) 0px 0px no-repeat;
}
</style>
</head>
<body>
<h1>Rollover Buttons using CSS</h1>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
As you'll realize, the above example isn't hard to grasp at all. After including an unordered list of links, they're styled by assigning the background images that you saw previously, in this way creating a set of five rollover buttons. Of course, the most important part of the example corresponds to the CSS rules, which show how each background image is assigned to the different states of the mentioned links.
This condition is clearly illustrated by the following CSS styles:
li a:link{
color: #000;
background: #fff url(button1.gif) 0px 0px no-repeat;
}
li a:visited{
color: #00f;
background: #fff url(button2.gif) 0px 0px no-repeat;
}
li a:hover{
color: #c90;
background: #fff url(button4.gif) 0px 0px no-repeat;
}
li a:active{
color: #f00;
background: #fff url(button3.gif) 0px 0px no-repeat;
}
This isn't rocket science, right? However, as I explained in the introduction of this article, the previous approach for creating CSS-based rollover buttons presents a small drawback, since the first time each image is loaded, the user will experience a noticeable lag.
As you can imagine, this artifact indeed goes to the detriment of the previous approach. Therefore let me show you how to create the same rollover buttons that you saw before, but this time using only one CSS sprite. Sounds interesting, doesn't it?
To see how these rollovers will be constructed with CSS sprites, please read the following section.
Next: Improved rollover buttons: using a CSS sprite-based approach >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 12 
