Menú de imágenes con CSS

1 . Preparación de las imágenes
2 . El código HTML
3 . La hoja de estilos CSS

Cuando Javascript se puso de moda y escribí mi curso hace ya unos años, el truco de moda consistía en hacer unas barras de menú y que al posar el ratón sobre ellas, un script cambiara la imagen y mostrara una distinta. Hoy vamos a estudiar un método alternativo para hacer lo mismo que tiene dos ventajas: que funciona exclusivamente con HTML y CSS, sin Javascript; y que tanto la imagen original como la alternativa están en el mismo fichero gráfico (GIF, JPG o PNG) y por tanto no es necesario esperar a que carguen las imágenes alternativas para que funcione, además de que así se necesitan menos ficheros y la página carga antes. El código funciona en Explorer, Mozilla y Opera.

Preparación de las imágenes

Cada fichero gráfico incluirá tanto la imagen que se debe mostrar por defecto como la que aparecerá al posar el ratón por encima. En nuestro caso incluiremos también un espacio en blanco (que podía no existir) entre medias de ambas imágenes:

Las medidas, en este caso particular, son las siguientes: cada imagen ocupa 113 pixels de ancho por 33 de alto. La imagen alternativa comienza a 47 pixels del borde superior del fichero. Estos datos deberán ser los mismos para cada imagen del menú gráfico.

El código HTML

En el código HTML sólo deberemos tener en cuenta tres cosas:

• Cada enlace deberá tener un atributo id único que permita diferenciarlo de las demás.
• Todos los enlaces estarán englobadas dentro de una etiqueta div que pertenecerá a la clase menu
• Dentro de cada enlace colocaremos el texto alternativo de cada opción del menú, para que la página sea accesible. No obstante, ese texto irá encerrado dentro de una etiqueta de clase alt para poder ocultarlo al resto de los usuarios.

<div class="menu">
  <a href="http://www.hermanos.org/" target="_blank" id="cuba"><span
    class="alt">Hermanos al rescate</span></a>
  <a href="http://www.avt.org" target="_blank" id="victimas"><span
    class="alt">AVT</span></a>
  <a href="http://www.bastaya.org" target="_blank" id="bastaya"><span
    class="alt">Basta Ya</span></a>
</div>

El código no es muy complicado; habréis notado que ni siquiera indicamos la imagen que corresponde a cada enlace. Eso estará en el código CSS, que es el que tiene miga en esta ocasión.

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.

El resultado sería este:

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.