Un poco más allá de las imágenes (2ª parte)

En la 1ª parte de esta serie, mostraba las características de la propiedad background-position y las posibilidades que brinda.

Hay dos ejemplos típicos que podemos ver en la web y que usan esta propiedad; el primero es muy sencillo y probablemente, es el uso más importante que podemos darle; el segundo es más complejo pero vale la pena tratar de entenderlo.

Empecemos con el más simple.

El CSS nos da la posibilidad de detectar ciertas acciones sobre las etiquetas y, fundamentalmente, sobre los enlaces, tanto en Internet Explorer como en Firefox (¡milagro, milagro!)

Un botón o un enlace tienen tres estados posibles que pueden ser detectados y sobre los que puede actuarse:

inactivo: el estado normal
activo: cuando se hace click
over: cuando se coloca el puntero del ratón sobre él

Las propiedades de estilo de estos estados se definen con:

a:link { ... }
a:active { ... }
a:hover { ... }

Y dentro de la etiqueta A, los eventos que controlan las acciones son:

onmouseout=" ... "
onmouseover=" ... "
onclick=" ... "

Un rollover es un efecto mediante el cual cambiamos la imagen de un botón en función de las acciones del usuarios sobre él; normalmente, lo vemos cuando pasamos el cursor sobre él o hacemos click y la imagen cambia.

Para hacer esto, utilizando los eventos, detectamos el estado y actuamos en consecuencia, cambiando una imagen por otra:

<a href="URL_destino">
<img src="URLimagen_inactiva" id="nombre"
   onmouseout="getElementById('nombre').src='URLimagen_inactiva';"
   onclick="getElementById('nombre').src='URLimagen_activa';"
   onmouseover="getElementById('nombre').src='URLimagen_over';"/>
</a>

O también, simplificando:

<a href="URL_destino"
   onmouseout="getElementById('nombre').src='URLimagen_inactiva';"
   onmouseover="getElementById('nombre').src='URLimagen_over';"/>
<img src="URLimagen_inactiva" id="nombre" >="" />
</a>

En el primer caso, necesitamos tres imágenes, en el segundo, necesitamos dos. El problema se genera porque sólo la imagen inactiva es cargada con la página, las otras se cargan cuando se produce el evento. En el caso de onmouseover tardará un poco pero el efecto, generalmente se verá, en el caso del onclick, no lo veremos casi nunca porque la acción se ejecutará antes que se cargue la imagen.

Es aquí donde la técnica que nos ocupa puede venir en nuestra ayuda. Usaremos un solo archivo que contendrá las dos o tres imágenes necesarias y que se cargará junto con la página.

Básicamente, lo que debemos hacer es crear un enlace vacío:

<a href="URL_destino" style=" ... propiedades ... "
   onmouseout="this.style.backgroundPosition='left top';"
   onclick="this.style.backgroundPosition='right top';"
   onmouseover="this.style.backgroundPosition='center top';">
&#160;
</a>

que tendrá las siguientes propiedades elementales:

background: transparent url(URL_imagen) no-repeat left top;
width:ANCHOpx; /* la mitad o la tercera parte del ancho de la imagen */
height: ALTOpx; /* el alto de la imagen */
display: block;
text-decoration: none;

y colocar  , o un espacio, entre la etiqueta de apertura y la de cierre para que los navegadores no la confundan con una etiqueta vacía.

Esto, puede hacerse de manera más sencilla, creando una clase:

a.demo, a.demo:link, a.demo:visited {
    background: transparent url(URL_imagen) no-repeat left top;
    width: ANCHOpx;
    height: ALTOpx;
    display:block;
    text-decoration:none;
}

a.demo:active {
    background-position: right top;
}

a.demo:hover {
    background-position: center top;
}

A la que usaremos de la siguiente manera:

<a href="URL_destino" class="demo"> </a>

La siguiente tabla muestra los efectos sobre algunos botones y las imágenes correspondientes:

Botones con efecto onmouseover
BOTÓN	IMAGEN
PROPIEDADES: background: transparent url(URL_imagen) no-repeat left top; width: ANCHOpx; height: ALTOpx; EVENTOS: onmouseout="this.style.backgroundPosition='left top';" onmouseover="this.style.backgroundPosition='right top';"
Botones con efecto onmouseover y onclick
BOTÓN	IMAGEN
PROPIEDADES: background: transparent url(URL_imagen) no-repeat left top; width: ANCHOpx; height: ALTOpx; EVENTOS: onmouseout="this.style.backgroundPosition='left top';" onmouseover="this.style.backgroundPosition='center top';" onclick="this.style.backgroundPosition='right top';"

Yendo un poco más allá, en el Simon Collison's Journal muestran una técnica que amplia las posibilidades del rollover, combinando imágenes, fondos y textos de manera fácil.

El archivo se hace de la misma manera, añadiendo las dos imágenes, una al lado de la otra:

	Quiere decir que, siguiendo el criterio mostrado hasta ahora, bastaría crear un bloque de 200x100.
	¿Qué pasaría si el bloque es más alto que la imagen, digamos de 150 pixeles y le agregamos un color de fondo para ver la diferencia?
Aparece un área vacía abajo, hemos agrandado el espacio pero la imagen no llega a cubrirlo.
Un texto cualquiera	En ese espacio, podemos poner un texto cualquiera.
Pero, como el texto aparece arriba y no abajo, lo más fácil es deslizar la imagen hacia abajo: background: #colorFONDO url(URL_imagen) no-repeat 0 50px;
Un texto cualquiera	Pero esto no resuelve el problema, en cuanto ponemos el mouse encima, deja de funcionar.
También debemos establecer las propiedades de los eventos: background: #colorFONDO url(URL_imagen) no-repeat 0 50px; onmouseover="this.style.backgroundPosition='-200px 50px';" onmouseout="this.style.backgroundPosition='0 50px';
Un texto cualquiera	Utilizamos -200px para deslizar el fondo hacia la segunda imagen, la que está a la derecha.

Creando las clases necesarias, todo esto es muy sencillo:

.rollovertexto {
    width: ANCHOimagen;
    height: ALTOimagen + ALTOtextos;
    background: colorFONDO url(URL_imagen) no-repeat 0 ALTOtextos;
    [ ... propiedades del borde y de los textos ... ]
}

a.rollovertexto:link, a.rollovertexto:visited, a.rollovertexto:active {
    background-color: colorFONDO;
    background-position: 0 ALTOtextos;
    [ ... propiedades del borde y de los textos ... ]
}

a.rollovertexto:hover {
    background-color: nuevocolorFONDO;
    background-position: -ANCHOimagen/2 ALTOtextos;
    [ ... propiedades del borde y de los textos ... ]
}

Y las usaremos así:

<a href="URL_destino" class="rollovertexto">Texto a mostrar.</a>

Un rollover diferente que incluye textos e imágenes.