ervdesign.net

Vamos a desarrollar un ejemplo de rollover de imágenes con css, incluido en el libro Beginning CSS Web Development, de Simon Collison. El libro resulta muy fácil de leer aunque no se sepa inglés demasiado bien, como es mi caso, debido a la manera en la que desarrolla sus ejemplos, explicando primero la manera antigua, para mostrarnos después el funcionamiento con css y técnicas más actuales.

En primer lugar, explicamos que la mecánica de la css, o el truco, si se quiere llamar así, consiste en una imagen de fondo, con unas dimensiones determinadas. Esta imagen de fondo, forma parte de un contenedor, que tiene de ancho, justo la mitad del ancho total de la imagen, y lo que conseguimos con nuestro rollover, es mostrar la otra mitad del fondo, consiguiendo así un falso efecto de roolover, que verdaderamente, sustituiría una imagen por otra. Veamos nuestra imagen.

Ahora marquemos nuestro enlace, sobre el que montaremos el rollover.

<a href="#" title="Rollover con CSS" class="rollover">Gran Lee Hickman</a>

Un enlace normal, simplemente hemos añadido una clase, en este caso rollover, como es natural. Veamos ahora el css.

a {
  outline: none;
}

.rollover {
  display: block;
  width: 210px;
  height: 144px;
  background: url(img/rollover.jpg) no-repeat;
  text-indent: -9999px;
}

a.rollover:link, a.rollover:visited, a.rollover:active {
  background: url(img/rollover.jpg) no-repeat;
}

a.rollover:hover {
  background-position: -210px;
}

Expliquemos un poco cada cosa. Primero quitamos outline a nuestro link. En la clase rollover, disponemos el link como block, convirtiéndolo así en un elemento de bloque, con todas sus propiedades. Le proporcionemos un alto y un ancho. Es precisamente en este momento, en el que ponemos como ancho del contenedor, la mitad del ancho de nuestra imagen, que seguidamente ponemos como fondo de nuestro enlace, convertido en bloque. Con el text-indent, sacamos el texto del enlace, para que sólo nos muestre la imagen de fondo. Para ir terminando, ponemos como fondo de las pseudo clases :link, :visited y :active, nuestra imagen. Y terminamos indicando que la pseudoclase :hover, desplazará -210px la imagen de fondo, para mostrar el otro lado de la imagen, y crear así el rollover.

La idea es tan simple como genial. En este enlace podéis ver el resultado final.