Muy buena propuesta la de Mikel en el uso de sprites para solucionar el problema "que no tenía solución en internet". Te has anotado un punto más hombre.
Con javascript y DOM podríamos hacer más corto y sin uso de clases lo que estamos haciendo ahora mismo, claro usando sprites. Por lo menos es lo que pienso, dejame pensar un poco más para pulir mi idea. Pero te voy poniendo la idea básica.
Digamos que tu lista tenga por ID "listaimágenes" lo que haríamos sería lo siguiente:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var imagen = 0;
var suma = 1;
function backchange(){
this.style.backgroundPosition = "left bottom";
}
function backchanger(){
this.style.backgroundPosition = "left top";
}
function sprites(){
var listaimas = document.getElementById('listaimagenes').getElementsByTagName('a');
imagen+=suma;
for(var i=0; i<listaimas.length; i++) {
var listele = listaimas[i];
listele.style.background = "url("+imagen+".jpg)";
listele.onblur = backchanger;
listele.onfocus = backchange;
listele.onmouseover = backchange;
}
}
</script>
<style type="text/css">
#listaimagenes{
margin:0;
padding:0;
width:300px;
height:33px;
background:black;
}
#listaimagenes li{
display:block;
float:left;
width:124px;
height:33px;
overflow:hidden;
}
#listaimagenes li a{
display:block;
width:100%;
height:100%;
}
#listaimagenes li a#cambio{
background-position: bottom left;
}
</style>
</head>
<body onload="sprites();">
<ul id="listaimagenes">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</body>
</html>
Esto funcionaría para el cambio entre enfocado y desenfocado. aún estoy viendo el caso del hover. Es una alternativa pero sin definir clases o ids a cada uno de los elementos.
=D.
Saludos!!
PD.- porsupesto tus imágenes tendrían que ser tantas como elementos de lista tengas, y tendrías que ponerles de nombres, números, del 1 hasta donde llegues xD.