lebyrus

La semana pasada terminé mi primer rollover de imágenes con CSS. Hasta esta misma mañana, estaba muy orgulloso de él. A fin de cuentas, después de tanto tiempo abusando de JavaScript para ese tipo de efectos, es un adelanto enorme prescindir de él.

Pero trabajar en local tiene un gran problema, y es que las imágenes cargan con gran velocidad, de tal manera que olvidamos los tiempos de carga, y resulta que el método que había usado para sustituir una imagen por otra no precargaba las imágenes de los efectos hover, con lo que se produce un feo efecto de fondo blanco hasta que se carga la imagen.

Comienza entonces mi proceso habitual de aprendizaje. Desde Google llego a un ejemplo de rollover de imágenes con CSS que no requiere precarga, donde explica una técnica muy sencilla para evitar el efecto que os he comentado.

La propiedad clave es background-position, propiedad que, simplemente, nos permite hacer un desplazamiento a la imagen de fondo. Con ello, en lugar de crear una imagen para cada estado, podemos crear una sola que aglutine los estados que necesitemos, en mi caso dos: normal y hover.

Como nuestro gráfico tiene 100px de alto, definiremos la altura a la mitad, para que sólo muestre la parte Normal.

a#rollover{
display: block;
width: 50px;
height: 50px;
background:
transparent url(/img/rollover.gif) no-repeat;
}a#rollover span{ display:none;}

Actualización (30/04/2004): Usamos esta última regla para ocultar el texto del enlace, algo que debería revisar tras leer las técnicas que os comento en este otro post. Fin actualización (30/04/2004)

Y luego definimos el comportamiento para hover de la siguiente manera, para que sitúe la imagen desde la base, con lo que se verá solamente la parte Hover:

a#rollover:hover{
background-position: bottom;
}

Y el resultado es éste: Jei/Jou