Bueno, eso seriía algo parecido a hacer un rollover de boton, asi por ejm el html llevaria algo así:
Código HTML:
<div class="rollover">
<a href="#">Uno 1</a>
<a href="#">dos 2</a>
<a href="#">Tres 3</a>
<a href="#">Cuatro</a>
</div>
Eso es solo un poco de links dentro de un div, con clase "rollover".
Ahora, con las imagenes ya creadas y ojala todas del mismo tamaño (y livianas de peso) ponemos unas instrucciones al div:
Código:
.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
Ya con eso, la imagen va a ir cambiando hasta si funciona de link y le pone estados de visitado o no. Conste que la imagen va de fondo.
Espero que te ayude a construir tu propio codigo.
Saludos,