CSSLab

Rápidos rollovers con CSS

Cuando hacemos un rollover, lo usual es tener 2 o más imagenes cortadas iguales, pero con diferentes estilos (otro color, forma, sombra, etc) y cuando construimos el código que la hace funcionar, se usa comunmente:

#menu a {
     background: url("boton.gif") top left no-repeat;
}
#menu a:hover {
     background-image: url("boton_over.gif");
}
#menu a:active {
     background-image: url("boton_activo.gif");
}

A continuación, muestro una manera simple de ahorrar la carga de la imagen (gif o jpg). En realidad no es magia lo que haremos, solamente un truco que en vez de cargar una nueva imagen al hacer el hover, se trabajará por sobre una misma imagen, la que contendrá todas las instancias necesarias. Entonces lo bueno es que esta imagen se cargue completa la primera vez, y al hacer el hover, ésta se desplazará lo necesario para que muestre donde se encuentre la parte correspondiente a esa istancia; lo mismo si tiene un active. Pero le agregaremos algo más.

Un sólo GIF, el que contiene las 3 instancias necesarias: link, hover y active

OK, entonces usaremos la imagen arriba para que el botón muestre sus 3 instancias. Lo bueno es que se cargará sólo la primera vez (cuando se cargue el sitio completo), y cuando llamemos a otra instancia, esta imagen la desplazaremos los pixeles necesarios (a la derecha o izquierda) para mostrar la gráfica correspondiente. El código, a continuación:

#menu a {
     background: url("boton_rollover.gif") 0 0 no-repeat;
}
#menu a:hover {
     background-position: -150px 0;
}
#menu a:active {
     background-position: -300px 0;
}

Ahora, un pequeño detalle que se ha encontrado en esto, es que ciertos browsers han mostrado (IE Win) una demora en este desplazamiento del background, por lo que en este lapsus ninguna imagen es desplegada (el tiempo es muy poco, pero igualmente se nota y molesta visualmente). Para solucionar esto, solamente se integrará un div interior, el q contendrá un background con la misma imagen del boton. Así, cuando ocurra este espaciado, no quedará en blanco la instancia y mostrará siempre de fondo el botón:

#menu {
     background: url("boton_rollover.gif") 0 0 no-repeat;
}

* Esto funciona con todos los browsers que soportan CSS2 ( Firefox, Opera, IE, Safari etc).

Ver ejemplo final.

El código completo quedaría así:

#menu {
     margin: 0;
     padding: 0;
     width: 150px;
     height: 40px;
     text-align: center;
     background: url("boton_rollover.gif") 0 0 no-repeat;
}
#menu a {
     padding-top: 6px;
     width: 100%;
     height: 100%;
     display: block;
     overflow: hidden;
     font-family: Georgia, "Times New Roman", Times, serif;
     color: #333333;
     font-weight: bold;
     font-size: 24px;
     text-decoration: none;
     background: url("boton_rollover.gif") 0 0 no-repeat;
}
#menu a:hover {
     background-position: -150px 0;
}
#menu a:active {
     background-position: -300px 0;
}