sprite

[javigrau]

Necesito ayuda , tengo una imagen gif de 50x100 en la que hay en la parte derecha
4logos en negro y 4 en rojo, necesito crear un sprite con efecto rollover , osea que cuando toque en la primera imagen en color negro (posicion 0-25), me cambie a (25-50) rojo

CODIGO HTML

Código HTML:

<div id="sprite">
<ul>
 
<li class="one"><a href="#"></a></li>
<li class="two"><a href="#"></a></li>
<li class="three"><a href="#"></a></li>
<li class="four"><a href="#"></a></li>
        
    </ul>
 

CODIGO CSS

Código CSS:

#sprite{ 
float:right;
font-weight: bold;
color: #fff;
border: 1px solid #e40808;
}
ul#sprite {
width:400px;
padding:0;
}
li#sprite {
list-style-type:none;
float:left;
padding:0;
margin:0;
}
 
li#sprite a {
display:block;
width:25px;
height:25px;
background-image:url(sprite.png);
}
 

ya no se como seguir porque no llego a ver la imagen del sprite.png