Menú de imágenes con CSS (2)

La hoja de estilos CSS

La hoja de estilos tendrá varias funciones:

• Ocultará el texto para quien no use un lector de páginas web.
• Especificará el tamaño de las imágenes del menú.
• Será donde se indique a qué enlace corresponde cada imagen, que se incluirá como imagen de fondo del enlace.
• Cuando el ratón pase por encima del enlace (es decir, de la imagen), se variará la posición de la imagen de fondo para ver la alternativa.

.menu a {
display:block;
border:none;
background-position:left top;
background-repeat:no-repeat;
width:113px;
height:33px;
}
.menu a:hover { background-position: 0 -47px; text-decoration: none; }
.menu .alt { display:none; }
.menu a#cuba { background-image: url(hermanos_cuba.jpg) }
.menu a#victimas { background-image: url(victimas_terrorismo.gif) }
.menu a#bastaya { background-image: url(bastaya.gif) }

Lo más interesante está en las definiciones .menu a#loquesea donde indicamos la imagen correspondiente a cada enlace y en .menu a:hover que es donde se rota, cambiando la posición vertical del gráfico de fondo desde arriba (top) a -47 pixels, de modo que muestre el gráfico alternativo.

No obstante, este sistema tiene un problema: en Internet Explorer la imagen parpadea cuando ponemos el ratón sobre ella. La razón es que este navegador no incluye por defecto en la caché las imágenes de fondo. En un próximo artículo examinaremos este problema para intentar encontrarle solución.

Usuarios que han visto este tema también han visto...

- Evita sobrecargar tus archivos CSS
- Cambiar la apariencia del cursor con CSS
- Diseño de menús con CSS avanzado
- Como crear cuadros con Hojas de Estilo
- Celdas con puntas redondeadas utilizando CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento