HTMLWeb - DHTML - Clipeando una capa (II)

manuales - recursos - gráficos - programación...

Home - DHTML - Clipeando una capa - 1 - 2 - 3

Clipeando una capa (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Accediendo a la propiedad clip.-

Bueno, pués ya tenemos una capa en nuestra página, posicionada y con unas dimensiones correctas, perfiladas mediante la propiedad CSSP clip.

¿Y si queremos recortar nuestra capa en tiempo real, es decir, acceder a esta propiedad mediante JavaScript y cambiar sus valores?.

Para conseguirlo debemos tener en cuenta que cada navegador trabaja de forma diferente, en los siguientes sentidos:

1) Internet Explorer:

Este navegador accede a cualquier propiedad de una capa mediante la sintaxis JavaScript:

document.all["id_capa"].style.propiedad = valor;

ya que para él todas las capas de una página pertenecen al objeto all, y las propiedades CSS pertenecen al objeto style. Hay que pasarle el identificador único id de la capa entre comillas simples o dobles, y lo mismo ocurre con el valor de la propiedad CSS a la que accedamos, salvo que sea width, height, top o left, en cuyo caso podemos pasar valores numéricos.

En el caso concreto de la propiedad clip, Internet Explorer necesita la sintaxis clip:rect(a,b,c,d), por lo que el acceso a esta propiedad en una capa con id "capa1" nos quedaría:

document.all["capa1"].style.clip = "rect(a,b,c,d)";

Observad cómo le pasamos el valor del clip como una cadena de texto.

2) Nestcape Navigator 4x:

Nestcape 4x accede a las propiedades de una capa de forma diferente, primero porque para él las capas forman parte del objeto layers, y segundo porque cada capa la considera como un documento independiente, por lo que para acceder a una de ellas tendremos que darle toda la ruta padre-hijo hasta llegar a ella, partiendo del objeto padre total, que es el documento general contenido en el body de la página.

Por otra parte, para este navegador no existe el objeto style, si no que las propiedades de estilo dependen directamente de la capa.

Además, Navigator 4x separa el acceso al recorte de una capa en sus 4 elementos constitutivos: top, right, bottom y left, por lo que debemos especificar un recorte individual para cada uno de ellos.

Por ésto, si tenemos una capa con id "capa1", que contiene en su interior otra capa de id "capa2", la forma de cambiarle el recorte será:

document.layers["capa1"].document.layers["capa2"].clip.top = a;
document.layers["capa1"].document.layers["capa2"].clip.right = b;
document.layers["capa1"].document.layers["capa2"].clip.bottom = c;
document.layers["capa1"].document.layers["capa2"].clip.left = d;

3) Nestcape Navigator 6x:

El acceso en este navegador a la propiedad clip es en todo análoga a la del caso de Internet Explorer, salvo que ahora las capas se consideran hijas del objeto general getElementById, que digamos que es un objeto que contiene todo lo que hay en el documento. Por ésto, la forma de acceso a la propiedad clip de la capa con id="capa1" en este caso es:

document.getElementById("capa1").style.clip = "rect(a,b,c,d)";

Con estos antecedentes, vamos a crear ahora una función que recorte una capa las dimensiones t, r, b y l que le pasemos como parámetros. El código necesario es el siguiente:

<html>
<head>

<style type="text/css">
    #capa1{
               position:absolute;
               top:20px;
               left:200px;
               width:150px;
               height:150px;
               clip:rect(0,150,150,0);
               background-color:red;
               layer-background-color:red;
               }
</style>

</script>

</head>

<body>

<a href="#" onClick="recorta('capa1',0,50,50,0); return false;">recorta</a>

</body>
</html>

Y el resultado lo tenéis en pinchando aquí.

NOTA: Para poder recortar una capa ésta debe estar posicionada absolutamente.

Home - DHTML - Clipeando una capa - 1 - 2 - 3