CSS Sprite - Rollover

CSS Sprite Rollover Research

After some research i decided that using a css sprite would be the most efficient method this is also because my website features a lot of images it would also save me a lot of time.

I needed to find the appropriate code to do so. I found this web page that explained the step by step.

http://www.dauid.us/blog/css-image-sprites/

HTML CODE:

<a class="imagesprite" title="Your Image Title" href="#"></a>

This is CCS this is enables it to be sprite.

a.imagesprite {
display: block;
width: 125px;
height: 60px;
background: url(location-of-your-image.jpg) no-repeat 0 0;
overflow: hidden;
text-indent: -15000px;
font-size: 0px;
line-height: 0px;
}

a:hover.imagesprite {
background-position: 0 -60px;
}

a:active.imagesprite {
background-position: 0 -120px;
}