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

Una "rareza" del CSS es que tiene la posibilidad de manejar las imágenes como capas (layers) lo que permite que se "deslicen" unas sobre otras, creando efectos.

Algo de esto aparece en el artículo Sliding Doors de A List apart aplicado (y muy mal explicado) a la creación de un menú con pestañas.

La técnica no es una novedad, se viene usando para crear juegos desde tiempo inmemorial pero, su aplicación a las páginas web abre nuevas posibilidades.

Vayamos despacio, lo primero que debería quedar claro son las propiedades CSS que permiten controlar el fondo de un elemento:

background: color URL_imagen repetir attachment posición

es la forma rápida de establecer todas las propiedades simultáneamente. De todas ellas, la que nos va a interesar es la posición.

La propiedad background-position define la posición del fondo de un elemento. En CSS, la propiedad se establece con:

background-position: laPosicion

y en JavaScript:

objeto.style.backgroundPosition = laPosicion

donde laPosicion es una cadena de texto que contiene uno o dos valores que puede ser:

una longitud: un valor expresado en cm, mm, in, pt, pc, px, em o ex
un porcentaje: un valor entero, seguido por el signo % (porcentaje del ancho o la altura del elemento)
el alineamiento vertical: top, center, bottom
el alineamiento horizontal: left, center, right

El valor por defecto es 0% 0% (left top). Si sólo se establece un valor, se aplica a ambos alineamientos. El primer valor especifica la coordenada horizontal y el segundo, la vertical.

Imaginemos esto, dos imágenes cualquiera, una al lado de la otra y formando parte del mismo archivo:

 

Ahora, supongamos que tenemos un DIV al que le asignamos una propiedad background para que se vea un fondo y le damos un tamaño, exactamente igual a la mitad de la imagen:

background: transparent url(URL_imagen) no-repeat left top;

 

Como el elemento contenedor (DIV), es más angosto que la imagen de fondo, sólo se verá la mitad izquierda ¿Y si cambiáramos un poco la propiedad, podría verse la otra mitad?:

background: transparent url(URL_imagen) no-repeat right top;

 

Quiere decir que modificando la posición, con sólo un archivo, podemos mostrar dos imágenes.

¿Que ventaja tiene esta técnica? que la imagen sólo se carga una vez, por lo tanto, la hace ideal para utilizarla como efecto rollover.

El código es sencillo, definimos el DIV dándole el tamaño adecuado y la imagen de fondo correspondiente. Luego, mediante los eventos onmouseover y onmouseout, cambiamos la posición del fondo de manera dinámica:

<div style="width: 200px; height: 150px;
background: transparent url(URL_imagen) no-repeat left top;"
onmouseover="this.style.backgroundPosition='right top';"
onmouseout="this.style.backgroundPosition='left top';">
&#160;
</div>

Nada impide que haya más imágenes, por ejemplo, aquí hay tres. En este ejemplo, utilizamos el evento onclick.

El código base es el siguiente:

<div id="demo" style="width: 150px; height: 150px;
background: transparent url(URL_imagen) no-repeat left top;">
&#160;
</div>

<a href="javascript:void(0);"
onclick="getElementById('demo').style.backgroundPosition='left top';">
Rojo</a>
<a href="javascript:void(0);"
onclick="getElementById('demo').style.backgroundPosition='center top';">
Amarillo</a>
<a href="javascript:void(0);"
onclick="getElementById('demo').style.backgroundPosition='right top';">
Azul</a>

Y aquí hay cuatro, que es el máximo que podemos controlar utilizando sólo los valores de alineación: left right top bottom center.

Pero, si en lugar de utilizar las palabras claves de alineación, utilizamos longitudes, las posibilidades se tornan infinitas.

En este ejemplo tenemos una imagen modulada, los íconos de 32x32 se colocan, horizontalmente, uno a continuación del otro. De esta manera, una aritmética simple nos dice que, cada uno de ellos está a una distancia específica del borde izquierdo de la imagen: 0, 32, 64, 96, 128, 160, 192, 224, 256, 288 y 320 pixeles.

Así que, para hacer referencia a la imagen ubicada en el 7º lugar, el evento onclick será algo así:

onclick="getElementById('demo').style.backgroundPosition='-192px 0px';

donde el valor es negativo porque la imagen se desliza hacia la izquierda:

Una posibilidad más avanzada sería crear una animación, desplazando la imagen pixel por pixel:

<div id="demoani"
style="background: #FFFFFF url(URL_imagen) no-repeat left top;
width: 32px; height: 32px;">
 
</div>

<a href="javascript:void(0);" onclick="doLOOP()">INICIAR</a>
<a href="javascript:void(0);" onclick="stopLOOP()">DETENER</a>

<script>
var xPos = 0;
var tiempoIntervalo = "";

function doLOOP() {
tiempoIntervalo = window.setInterval("moverSE()",10);
}

function stopLOOP() {
window.clearInterval(tiempoIntervalo);
tiempoIntervalo = "";
}

function moverSE() {
xPos = xPos-1;
if(xPos==-320) {xPos=0;}
document.getElementById('demoani').style.backgroundPosition=xPos + "px 0px";
}
</script>