Menú de imágenes con 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.

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

- CSS para campos textarea de formulario
- Barra de desplazamiento a la izquierda con CSS
- Cómo solucionar problemas en CSS
- Estilizando formularios
- Neutralizar los estilos CSS iniciales

- Versión imprimible de este documento

- Enviar por e-mail este documento