How To Make a CSS Sprite Rollover List Part 2
10/20/2009
I know there have been many people anxiously waiting for Part 2 of
How To Make a CSS Sprite Rollover List. Didn't read part 1 yet? Well before you learn how to make a CSS Sprite, why don't you head over to part 1 and learn
Why Use CSS Sprites.
Now let's get to work. Follow these easy three instructions on producing a cross browser compatible list with a CSS sprite and rollover functionality!
1) Create your image
First thing is first. Go ahead and create your CSS sprite image. Make sure you keep each icon the same size and the same distance away. In my case, I have each icon 54 x 54 pixel. Here is my
image.
2) Create the HTML
Next step is to create the HTML. My HTML is listed below:
<div id="container">
<h1>CSS Sprite Example</h1>
<ul>
<li class="item1"><a href="#">List Item 1</a></li>
<li class="item2"><a href="#">List Item 2</a></li>
<li class="item3"><a href="#">List Item 3</a></li>
<li class="item4"><a href="#">List Item 4</a></li>
</ul>
</div>
2) Create the CSS
Next step is to create the CSS. My CSS is listed below:
div#container {
width: 400px;
padding:30px;
}
div#container h1 {
font-family:arial;
color:#222;
font-size:18px;
}
a {
color:#006CB5;
text-decoration:none;
}
#container li{
height:54px;
list-style-type:none;
display:block;
margin:3px 0 3px 0px;
font-size: 46px;
}
li.item1 a{
background:url('csssprites.jpg') no-repeat;
background-position:0px 0px;
padding-left:58px;
}
li.item1 a:hover {
background:url('csssprites.jpg') no-repeat 0px -54px;
color:#F3AE08;
}
li.item2 a {
background:url('csssprites.jpg') no-repeat 0px -108px;
padding-left:58px;
}
li.item2 a:hover {
background:url('csssprites.jpg') no-repeat 0px -162px;
color:#F3AE08;
}
li.item3 a {
background:url('csssprites.jpg') no-repeat 0px -216px;
padding-left:58px;
}
li.item3 a:hover {
background:url('csssprites.jpg') no-repeat 0px -270px;
color:#F3AE08;
}
li.item4 a {
background:url('csssprites.jpg') no-repeat 0px -324px;
padding-left:58px;
}
li.item4 a:hover {
background:url('csssprites.jpg') no-repeat 0px -378px;
color:#F3AE08;
}
Voila! Easy as 1, 2, 3. I hope you enjoyed it and you learned from this quick tutorial. Please comment if you have any questions! You can follow me on
Twitter
Jonathan Crowe
10/20/2009
Add your comments:
Items in bold indicate required information.