Creating Rollover Effects with CSS Sprites - Completing the CSS sprite-based rollover example
(Page 4 of 4 )
As I promised in the lines that you just read, here is the complete source code that creates the CSS sprite-based rollover buttons, including the respective markup. Take a look at the below code sample, please:
<!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 sprites</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(buttons.gif) 0 0 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(buttons.gif) 0 0 no-repeat;
padding-left: 50px;
text-decoration: none;
}
li a:link{
color: #000;
background-position: 0 0;
}
li a:visited{
color: #00f;
background-position: 0 -25px;
}
li a:hover{
color: #c90;
background-position: 0 -77px;
}
li a:active{
color: #f00;
background-position: 0 -51px;
}
</style>
</head>
<body>
<h1>Rollover Buttons using CSS sprites</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>
All right, that's all the client-side code that you need to create a set of five rollover buttons that uses one CSS sprite. You may want to test this example on your own machine, so I included a ZIP file that contains the all HTML files and background images shown here. I hope you enjoy using this CSS sprite!
Final thoughts
In this first part of the series, I showed you how to create a CSS sprite to implement a basic system of rollover buttons, which can be part of any navigation bar. As you probably realize, CSS sprites are a simple but extremely powerful concept, and can be used in other cases as well.
Based on this situation, in the next article I'm going to show you how to use a CSS sprite to quickly develop a dynamic banner. Therefore, I don't think you're going to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 12 
