Juglar

El objetivo es que los fondos de los componentes del menú sean una imagen y que al pasar el ratón sobre cada uno de ellos, cambie la imagen. El efecto es similar al que casi todos usamos jugando con los colores, subrayados y fondos de los enlaces, pero con imágenes de fondo los resultados son mucho más impactantes.

El resultado lo podemos conseguir utilizando exclusivamente CSS, y una sola imagen que recoja todos los cambios deseados.

Veamos un ejemplo, con el logo de Bitacoras.com:

La imagen mide 88px de ancho y 62px de alto (31x2).

El código HTML

<div class="ejemplo">
<a href="http://www.bitacoras.com/" id="bit"><span class="alt">Bitácoras.com</span></a>
</div>

En el CSS

.ejemplo a {
display:block;
background-position:left top;
background-repeat:no-repeat;
width:88px;
height:31px;
}
.ejemplo a:hover { background-position: 0 -31px; text-decoration: none; }
.ejemplo .alt { display:none; }
.ejemplo a#bit { background-image: url(http://juglar103.blogsome.com/uploads/juglar103/bit0.JPG) }

Por defecto, se muestra la parte de arriba de la imagen, y cuando pasamos el ratón (hover) la imagen se desplaza 31 pixels hacia arriba, mostrando la parte de la imagen. Observadlo:

En Free Menu Designs tenéis unos cuantos ejemplos de menús usando este sistema, que podéis descargar para vuestra bitácora.

Gracias a los enlaces de Jordifreek, he practicado distintas variantes del tema, que he recogido en Menús con CSS.

Programacion.com