Este truco es muy conocido y bastante extendido. Sin embargo, aquellos diseñadores con experiencia previa en Dreamweaver siguen usando JavaScript para implementar este efecto.
Hasta los navegadores de 4a generación, IE 5 y Netscape 4, teniamos que utilizar sencillas funciones en JavaScript (DreamWeaver sigue usandolas, así que un motivo más para olvidarse de esa herramienta) para cambiar la imagen de por ejemplo un botón, cuando pasabamos el raton sobre él o haciamos clic en él.
Con la llegada de navegadores con soporte medianamente decente para CSS, disponemos de un método mucho más eficaz y sencillo de implementar. La principal ventaja es que no hace falta usar JavaScript, con lo que este método funcionará incluso en aquellos navegadores que lo tengan desactivado.
El truco consiste en empaquetar las distintas versiones del botón en una única imagen. Aunque podríamos seguir usando distintas imagenes como con la técnica JavaScript, necesitariamos precargar todas las imagenes para que el primer efecto fuera adecuado.
En este ejemplo empaquetaremos las imagenes en vertical, ya que cada versión es mayor horizontalmente que verticalmente. De todas formas, es igualmente válido el ponerlas en horizontal, una al lado de la otra.
En el diagrama vemos que cada una de las versiones del botón está colocada debajo de la otra, en una solo imagen. La altura de cada versión es de 32 pixels y la anchura de 108 pixels. Aunque es tecnicamente posible el versiones de distintos tamaños, no es muy recomendable hacerlo ya que si no se sabe bien lo que se está haciendo podemos obtener un efecto rollover bastante malo.
La imagen que hemos creado es la siguiente, por favor, os ruego diculpeis mi falta de aptitudes para las artes plásticas.
Ahora vamos con el CSS, que es la parte fundamental de esta técnica. Asumimos que tenemos un boton en el HTML declarado con un enlace (<a>), es posible utilizar otros elementos, sin embargo, si usamos otra cosa que no sea un enlace no funcionará en Internet Explorer, que por mucho que nos pese, sigue siendo el navegador más usado.
El código HTML pinta así
<a href="#" class="boton">Home</a>
<a href="#" class="boton">Links</a>
Vemos que hay definidos dos enlaces con la clase boton. Ahora le añadimos un poco de CSS para aplicar el efecto.
- a.boton {
- // Definimos la dimension del botón
- display: block;
- width: 98px; // 108 - horizontal padding
- height: 25px; // 32 - vertical padding
- // Posicionamos el texto dentro del boton
- padding: 7px 0 0 10px;
- // Le asignamos la imagen
- background-image: url( boton.png );
- background-repeat: no-repeat;
- background-position: 0 0;
- }
- // Para cuando pasemos el ratón por encima
- a.boton:hover {
- background-position: 0 -32px;
- }
- // Ahora para cuando hagamos click en él
- a.boton:active {
- background-position: 0 -64px; // 32x2
- }
Este ejemplo quedaría así
Como se puede apreciar, esté método resulta muy útil a la hora de diseñar web sites. Con un poco de práctica y algo de imaginación podemos realizar bastantes efectos simplemente con CSS.
