Prueba de Sprites con CSS

Imagen de ejemplo:


Código HTML para la lista:

<ul id="nav"> <li><a id="item1">Diseño</a></li> <li><a id="item2">Script</a></li> <li><a id="item3">Citas</a></li> <li><a id="item4">HTML</a></li> <li><a id="item5">¿Listo?</a></li> </ul>

Regla CSS para el efecto sprite:

#nav li {display: inline;} #nav li a{display:block;width: 115px;height: 66px;text-indent: -9999px; background: url(../images/1.jpg);float: left;} #nav li a#item1 {background-position: 0px 0px } #nav li a#item1:hover {background-position: 0px -66px } #nav li a#item2 {background-position: -115px 0px } #nav li a#item2:hover {background-position: -115px -66px } #nav li a#item3 {background-position: -230px 0px } #nav li a#item3:hover {background-position: -230px -66px } #nav li a#item4 {background-position: -345px 0px } #nav li a#item4:hover {background-position: -345px -66px } #nav li a#item5 {background-position: -460px 0px } #nav li a#item5:hover {background-position: -460px -66px }

Resultado final :D

Este es el producto final de la aplicación del estilo