El recorte de una capa se refiere a qué parte de la capa será visible. No son lo mismo los valores de recorte, que el ancho y el alto de la capa. El ancho y el alto de la capa le dicen al navegador cómo ajustar los elementos en el interior, para saber cuándo se salta de línea, por ejemplo. Los valores de recorte son, por así decirlo, las coordenadas de una ventana por la que se observará la capa, es decir, que lo que no esté dentro de la ventana, no se verá.

La zona de recorte se define como un rectángulo, ajustando cada uno de los cuatro bordes: superior, derecho, inferior, izquierdo. De esta manera, se puede recortar la capa sólo por un borde, si es lo que se desea. Hay que tener en cuenta, a la hora de colocar estos valores, que todos son con respecto a la capa (no son absolutos), tomando como base la esquina superior izquierda de la misma.

La sintaxis de la propiedad CSS para el recorte es:

	clip:rect(superior,derecho,inferior,izquierdo)

Donde superior, derecho, inferior e izquierdo son los valores de los bordes, en pixels. A continuación muestro un ejemplo de tag DIV usando una ventana de recorte:

	<div ID="divImagen" STYLE="position:absolute; left:50; top:50;
	width:100; height:50; clip:rect(-10,110,60,-10);">
	</div>

En esta capa, se crea un borde extra de diez pixels alrededor de toda la capa: la primera coordenada (arriba), vale -10, lo que crea el borde extra superior; la segunda (derecha) vale 110, lo que supone diez más que el ancho de la capa; la tercera (abajo) está a 60, que son diez pixels más que el alto de la capa; y por último, la cuarta (izquierda) vale -10, creando así el borde extra izquierdo.

En todo este apartado de recorte, vamos a colocar dentro de la capa que estemos tratando como ejemplo, una imagen de 500x358 pixels (mar.jpg), que nos va a ayudar a ver los efectos del recorte. Por tanto, la capa con la imagen ahora la declaramos así:

	<div ID="divImagen" STYLE="position:absolute; left:50;
	top:50; width:500; height:358; clip:rect(0,500,358,0);
	 background-image:URL(mar.jpg); layer-background-image:URL(mar.jpg); repeat:no;">
	</div>

Como se puede observar, en este caso las coordenadas de recorte no están afectando a la imagen, porque la ventana es exactamente del mismo tamaño que la imagen. Pero vayamos por partes, hay tres propiedades arriba que no hemos utilizado hasta ahora. Las tres son necesarias para colocar una foto dentro de una capa (si es que la queremos colocar como una propiedad CSS de la capa). La primera de ellas, layer-background-image:URL(mar.jpg) indica la imagen que queramos introducir, aunque sólo funciona para el Explorer. Por eso, para dejarlo listo para el Netscape, utilizamos la otra propiedad, layer-background-image:URL(mar.jpg). La tercera y última, repeat:no es para ambos navegadores, y nos indica si queremos hacer que la foto se repita, como un mosaico.

La siguiente capa sí que limita la imagen, concretamente la reduce 100 pixels por la derecha:

	<div ID="divImagen" STYLE="position:absolute; left:50; top:50; width:500; height:358;
	 clip:rect(0,400,358,0); background-image:URL(mar.jpg); 
	 layer-background-image:URL(mar.jpg); repeat:no;">
	</div>

Ejemplo

Recorte en el Netscape

Ahora que hemos recortado la imagen, podemos tanto leer los valores de recorte como cambiarlos.

Para el Netscape, se pueden cambiar o leer estos valores individualmente:

	document.divImagen.clip.top
	document.divImagen.clip.right
	document.divImagen.clip.bottom
	document.divImagen.clip.left

Por ejemplo, para mostrar una ventana con el valor de recorte del borde inferior:

	alert (document.divImagen.clip.bottom)

Y para colocarlo a 175:

	document.divImagen.clip.bottom = 175

Recorte en el Explorer

En esta ocasión, se leen los todos valores a la vez. Por ejemplo, para comprobar los valores de recorte y mostrar una ventana con esa información:

	alert (divImagen.style.clip)

Esto devolverá una ristra con los valores de recorte. Una ristra de respuesta podría ser:

	"rect(20px 45px 75px 60px)"

Si por el contrario, lo que queremos es cambiar alguno de los cuatro valores de recorte, no lo podemos hacer individualmente, tenemos que ajustar los cuatro a la vez:

	divImagen.style.clip = "rect(0px 200px 75px 10px)"

Comprobar Valores de Recorte

Trabajar con capas que queramos recortar no es difícil, pero sí hay que escribir código lioso para hacer pequeñas cosas, sobre todo en el caso del Internet Explorer. Por eso, lo mejor es automatizar todas estas tareas introduciéndolas en funciones. Y es precisamente esto lo que vamos a ver en el resto de este apartado: las funciones que con más frecuencia solemos usar.

En primer lugar, crearemos una función que nos devuelva el valor del borde de recorte que nosotros le digamos:

	function LeeRecorte(objeto,borde) 
	{
	    if (ns4) 
	    {
		if (borde=="superior") 
		    return objeto.clip.top
		if (borde=="derecho") 
		    return objeto.clip.right
		if (borde=="inferior") 
		    return objeto.clip.bottom
		if (borde=="izquierdo") 
		    return objeto.clip.left
	    }
	else 
	    if (ie4) 
	    {
		var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px")

		if (borde=="superior")
		    return Number(vectorRecorte[0])
 		if (borde=="derecho") 
		    return Number(vectorRecorte[1])
		if (borde=="inferior") 
		    return Number(vectorRecorte[2])
		if (borde=="izquierdo") 
		    return Number(vectorRecorte[3])
	    }
	}

Como vemos, recibe dos parámetros, objeto es la capa que vamos a modificar aunque, eso sí, debe ser un identificador directo, y borde representa el borde de recorte del que queremos conocer su valor. Es una ristra, y sus posibles valores son: 'superior', 'inferior', 'derecho' e 'izquierdo'.

Por tanto, una llamada a esta función podría ser:

	LeeRecorte (imagen,'derecho')

Ejemplo

Ajustar Valores de Recorte

La siguiente función la usamos para colocar los valores de recorte a los que queramos:

	function Recortar (objeto,superior,derecho,inferior,izquierdo)
	{
	    if (ns4) 
	    {
		objeto.clip.top = superior
		objeto.clip.right = derecho
		objeto.clip.bottom = inferior
		objeto.clip.left = izquierdo
	    }
	else 
	    if (ie4) 
		objeto.clip = "rect(" + superior + "px "; 
		objeto.clip +=  derecho + "px " + inferior + "px " + izquierdo + "px)";
	}

Lo que recibe es la capa (una vez más como variable directa) y los cuatro nuevos valores para el recorte.

Ejemplo

Valores Relativos de Recorte

Por último, otra función muy útil es aquella que usamos para aplicar un recorte pasándole valores relativos, cuando queremos aumentar o disminuir la ventana:

	function RecorteRelativo(objeto,superior,derecho,inferior,izquierdo) 
	{
	    if (ns4) 
	    {
		objeto.clip.top    = LeeRecorte(objeto,'superior')  + superior
		objeto.clip.right  = LeeRecorte(objeto,'derecho')   + derecho
		objeto.clip.bottom = LeeRecorte(objeto,'inferior')  + inferior
		objeto.clip.left   = LeeRecorte(objeto,'izquierdo') + izquierdo
	    }
	    else
		if (ie4)
		    objeto.clip = "rect("+(this.LeeRecorte(objeto,'superior')+superior)+"px ";
			objeto.clip += (this.LeeRecorte(objeto,'derecho')+derecho)+"px ";
			objeto.clip += Number(this.LeeRecorte(objeto,'inferior')+inferior)+"px";
			objeto.clip += Number(this.LeeRecorte(objeto,'izquierdo')+izquierdo)+"px)";
	}

Ahora, los cuatro valores de recorte que le pasamos son relativos, es decir, indican el número de pixels que queremos aumentar o disminuir cada borde (valor positivo o negativo).

Ejemplo

Recorte Animado

Pues bien, ahora que ya hemos visto cómo leer y cambiar los valores de recorte, ha llegado el momento de ver lo mejor de este apartado: aplicar animaciones al recorte. Realmente no es nada que no hayamos visto hasta el momento, es simplemente la conjunción de las animaciones con el recorte. Para ello, usaremos la función setTimeout que conocimos anteriormente.

Por ejemplo, supongamos que queremos ver la imagen completa, pero que poco a poco vayamos viendo menos por la parte derecha, esto es, el valor del borde derecho de recorte va disminuyendo. Entonces:

	function AnimarRecorte()
	{
	    if (LeeRecorte(imagen,'derecho') > 100)
	    {
		RecorteRelativo (imagen,0,-10,0,0)
		setTimeout ("AnimarRecorte()",30)
	    }
	
	}

Lo que hacemos es ir decrementando poco a poco el valor del borde derecho de recorte (en diez pixels cada vez), hasta llegar a los cien, de esta manera acabaremos viendo únicamente los 100 primeros pixels de la imagen.

Ejemplo

- Versión imprimible de este documento
- Enviar por e-mail este documento