Imagen Rollover para menu

Para crear una imagen rollover por ejemplo para un menú, hay que preparar una única imagen con los estados que va a tener cuando se está inactivo, encima, etc.

En el archivo de estilos se puede agregar un código como el siguiente:


.button a:link,
.button a:visited
{
display:block;
overflow:hidden;
background-image:url(images/menu.png);
background-repeat:none;
height:0;
width:400px;
padding-top:100px;
background-position:0px 0px;
}

.button a:hover
{
background-position:0px -100px;
}