Se va a mostrar un pequeño truco para crear un efecto de rollover con imágenes, pero usando un simple CSS, sin necesidad de ninguna otra tecnología o lenguaje de programación. El rollover (iluminación o cambio de color al pasar el ratón por encima) es un efecto muy sencillo, pero puede dar ideas para dar mayor dinamismo a nuestro sitio, sin que esto afecte a la complejidad del código.

Además, de paso, vamos a responder una pregunta habitual: ¿cómo hacer para que los enlaces ocupen todo el espacio de la celda o capa donde están situados? O dicho de otra forma: ¿cómo hacer para que el enlace se muestre con todo el espacio disponible dentro del contenedor en el que está?

Lo que deseamos es que el lugar donde colocamos el enlace se comporte como el propio enlace, así, al pasar el ratón por el contenedor donde se haya situado el link (no necesariamente sobre el texto del enlace), se realice el efecto de iluminación.

Lo mejor que podemos hacer es ver el ejemplo en marcha. Merece la pena prestar atención a que el enlace cambia de color al pasar el ratón por encima, pero no hace falta situarse sobre el texto del enlace para que cambie, sino que sirve con posicionarlo sobre la capa donde se ha colocado el enlace.

El código HTML

Para realizar este efecto se ha creado un código HTML como el siguiente:

<div class=navegador>
<p class=navenlace><a href="#">Enlace 1</a></p>
<p class=navenlace><a href="#">Link chulo</a></p>
<p class=navenlace><a href="#">Otras cosas</a></p>
</div>

Tenemos una capa con estilo "class=navegador" y dentro de esta, tres párrafos con estilo "class=navenlace". La clase navegador contendrá estilos generales para toda la barra de navegación y los párrafos, con clase navenlace, contendrán los estilos de cada línea del navegador.

Hemos visto que el HTML es bastante sencillo. Ahora sólo tenemos que aplicar unos estilos bonitos para realizar el efecto buscado.

Estilos CSS

Empecemos por la capa general, con clase "navegador", donde vamos a utilizar una declaración de estilos como esta:

.navegador{
   margin-left: 39%;
   margin-right: 42%;
}

Simplemente le estamos indicando unos márgenes, para que se sitúe donde nosotros queremos, que es más o menos en el centro de la ventana del navegador.

Ahora veamos la declaración del estilo de la clase navenlace, que es el estilo que damos a cada línea de enlace de la barra de navegación.

.navenlace {
   font-weight: bold;
   border: 1px solid #999999;
   margin:3 0 3 0px;
   padding: 2px;
}

Simplemente hemos indicado negrita, un borde de 1 pixel, así como un margen y un padding.

Ahora, para cada enlace hemos definido un par de estilos. Uno para los enlaces en general y otro para los enlaces "hover", que son los que tienen el ratón encima de ellos. De este modo, los enlaces siempre se verán de un mismo modo y cuando se ponga el ratón encima de uno de ellos se activará el estilo definido en hover.

.navenlace a {
   background-image: url("nav-fondo2.gif");
   color: #666666;
   text-decoration: none;
   display: block;
   width: 100%;
}

.navenlace a:hover {
   background-image: url("nav-fondo.gif");
   color: #ffffcc;
}

En el primer caso (.navenlace a) se indica el estilo para los enlaces en general. Simplemente hemos definido una imagen de fondo "nav-fondo2.gif" para los enlaces, un color para el texto del link, que no aparezcan subrayados y, lo más importante, que se comporten como un bloque, que se indica con el atributo display: block;

Al comportarse los enlaces como un bloque se produce el efecto que estábamos buscando: que no hace falta posicionarse sobre el texto del enlace para que cambie el estilo, simplemente lo hará con posicionarse en el contenedor donde están situados. Con ello también conseguimos que el estilo de los enlaces se transfiere a todo el contenedor. Además, también hemos definido el ancho de los enlaces a 100%, para asegurarnos que ocupen todo el espacio del contenedor donde están situados.

En el segundo caso (.navenlace a:hover) simplemente definimos un estilo distinto, utilizando una imagen de fondo y un color distinto para los enlaces. La imagen llamada "nav-fondo.gif" se mostrará como fondo del espacio donde está colocado el enlace. Sólo se modificará el estilo del enlace sobre el que hayamos puesto el ratón y no el de los otros enlaces de la barra de navegación.

Con esto ya está. Es así de simple. Está probado en Internet Explorer y en Mozilla Firefox.

Ahora bien, quería comentar que también se puede dar un ancho definido a la capa donde están todos los enlaces, <div class=navegador>, utilizando el atributo width. Esto da problemas en Internet Explorer a la hora de que los enlaces se comporten como un bloque, con lo que sólo se activan si ponemos el ratón en el texto del link. La solución para Internet Explorer, es justamente asignar el atributo width: 100% a los enlaces, en la clase "navenlace". Este atributo width: 100% para Firefox le resulta indiferente, con lo que el problema queda resuelto para los navegadores más comunes.

Para finalizar, podemos ver el ejemplo en una página aparte.

Tenemos otro artículo que realiza lo mismo pero con una técnica más depurada y optimizada.