Realizar un rollover sólo con CSS y utilizando imágenes

  • Por
Los efectos de rollover (cambio al pasar el ratón por encima) especificados mediante CSS, también se pueden hacer con imágenes.
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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Rumoroso

16/2/2006
Hay una cosa que se podría mejorar. Cuando se pasa por encima del enlace, se produce un desfase hasta que ocurre el cambio de imagen. Esto se debe a que la imagen tiene que cargarse. Para evitarlo hay una manera sencilla. Lo que se debe hacer es poner las dos imagenes, la del estado de reposo y la del "hover" en una sola separadas por un espacio, el que se quiera, pero siempre sabiendo cuanto. Luego, con la css se puede poner dicha imagen en el background del enlace.
a{
background: transparent url("imagen.png") 0 0 no-repeat;
}
a:hover{
background: transparent url("imagen.png") 50px 50px no-repeat;
}

El efecto es el mismo pero se basa en el cambio de posición de la imagen de fondo, con lo que no va a ocurrir el retardo.
Un saludo

sergio

25/2/2009
hola
soy un novato del diseño y gasto un editor en el que puedo pegar codigos

la pregunta es,como puedo hacer un rollover desunido,es decir que cuando el raton pase por encima del boton,aparezca una imagen en otra parte de la pantalla,he mirado vuestro codigo,pero no he visto las coordenadas xy de ubicacion en pantalla de la segunda imagen,la que aparece cuando pasa el raton por encima

me hace mucha falta saber como para un proyecto que tengo en desarrollo
muchas gracias y un saludo

Nucleorion

24/10/2010
No me funcionaba en IE7 he conseguido solucionarlo asi
.navegador{
margin-left: 2%;
margin-right: 10%;
}

.navenlace {
font-weight: bold;
/*border: 1px solid #999999; */
margin:3 0 3 0px;
/*carga la imagen antes de que se necesite para que no tarde en aparecer*/
background: transparent url('images/on.jpg') 0 -300 no-repeat;
}

.navenlace a{
background-image: url('images/off.jpg');
text-decoration: none;
display: block;
width: 100%;
padding: 4 6 4 6;
}
/*Esta regla es necesaria solo por el IE, no afecta al resto de navegadores El orden de las reglas afecta al resultado a:visited no se puede poner despues de a:hover porque la reescribe*/
.navenlace a:visited{
background-image: url('images/off.jpg');
text-decoration: none;
display: block;
padding: 4 6 4 6;
}

.navenlace a:hover {
background-image: url('images/on.jpg');
padding: 4 6 4 6;
color: #805E1E;
}

Rai

20/1/2011
Gracias
Gracias por compartir, me funciono perfect ahora no más estoy viendo como hacer que el texto me quede abajo

Juan Carlos

26/3/2011
Mover el Texto en el eje "Y"
Gracias por enseñarme este truco que evita tener que escribir códigos muy largos y hacer botones con textos, tuve incombenientes porque el texto estaba quedando muy arriba, sin embargo después de un rato largo supe que necesitaba del atributo line-height: 32px; dentro de navegador

Gracias!!!

anne

02/11/2011
hola
he intentado poner este menu en horizontal y no lo he podido me puedes hechar una mano?