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>
3) 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!
Sales & Marketing Technologies is Central Florida's most established Digital marketing and web development company.
Contact us today to see how we can unlock your potential online.