Introducción

El theme que utilizamos en soygik.com tiene un trozo de código muy interesante que permite hacer que una imágen cambie a otra al pasar el ratón por encima de ella. Explicándome un poco más, realmente esto se consigue con una sola imágen que está dividida en dos partes. Cuando se sitúa el ratón por encima de la imágen, el código hace que se muestre un trozo de la imágen y cuando no está el ratón por encima se muestra otro trozo.

Ejemplo

Para aclararnos las dudas de lo que estoy hablando, mira arriba de la página donde hay una barra de color oscuro, en esa barra a la izquierda pone “Soy Gik .com“, si posas/pasas el ratón por encima del texto, éste cambiará y pondrá la versión del weblog: “versión alpha” (y también tiene un enlace a una página, pero la idea es que cambie, luego después es fácil poner el enlace)

Veamos el código utilizado

El código que permite hacer estos cambios en el trozo de imágen mostrada es:

a.rollover {
display: block;
width: 30px;
height: 30px;
text-decoration: none;
background: url(’imagen.jpg’);
}
a.rollover:hover {
background-position: -30px 0;
}

Este código cambiaría una imágen doble (dos imágenes dentro de una) que estuviera una a la izquierda (la que siempre se va a ver) y otra a la derecha (la imágen que se verá cuando pasemos el ratón por encima). Como podéis ver, con los tamaños que hay, la imágen total sería de 60px (ancho) x 30px (alto). Y cada imágen pequeña sería de 30×30px una al lado de la otra. Éste código lo meteríamos en el archivo CSS de nuestra página.

Y luego, donde queramos poner la imagen que cambia habría que meter el código siguiente:

<a href=”#” class=”rollover”> </a>

Personalmente creo que es bastante sencillo y los resultados son muy muy chulos. Esto es válido para navegadores como: Firefox 2, Firefox 1.5, IE 6, IE 7, Opera, Netscape, Safari 2, Safari 3 beta.

Dado que lo he escrito todo de puño y letra espero no haberme equivocado en nada. Si veis algo mal dejarlo en los comentarios.