El Hacker

Layers en HTML

Uno de los aspectos más importantes de la implementación del HTML dinámico de Netscape Communicator es la creación de una etiqueta HTML nueva con el objetivo de contener toda la funcionalidad del posicionamiento CSS. Hay que indicar que esta solución es propietaria y que, además, desapareció con la aparición de la versión 6 de Netscape. Solo se usará, por tanto, si deseamos mantener la compatibilidad hacia atrás.

Esta etiqueta, LAYER, contradice los principios de los estándares del consorcio W3C, que intentan separar el contenido de la forma de representarlo. Sin embargo, resulta casi imprescindible su estudio si se desean crear soluciones en DHTML compatibles con Netscape 4.x, porque, en ocasiones, esta etiqueta puede ser la única manera de que el Netscape Communicator haga lo que nosotros queremos que haga.
Ejemplo de uso

Doy por supuesto que el lector ya sabe como posicionar empleando CSS, de modo que la etiqueta le resultará lo suficientemente sencilla que la mejor manera de aprenderla será mediante el uso de un ejemplo, donde podamos ver las diferencias entre uno y otro sistema. Así, por ejemplo, el siguiente código:

<LAYER TOP="20" LEFT="20" WIDTH="250" Z-INDEX="3">
<img src="alvarez1.jpg">
</LAYER>

equivaldría a

<DIV STYLE="position: absolute; top:20px; left:20px;
width:250px; z-index=1;">
<img src="alvarez1.jpg">
</DIV>

Podemos observar que no hemos hecho más que trasladar a HTML todas los atributos del estilo. Todos menos uno, position. El porqué de este extraño apartheid lo veremos en la próxima sección.
Parámetros

Se pueden dividir los parámetros que admite la etiqueta LAYER de muchas maneras. Nosotros utilizaremos la misma división que vimos en la definición mediante CSS, indicando que parámetros no tienen equivalencia entre una forma y otra.
Posicionamiento absoluto y relativo

La etiqueta LAYER no tiene ningún parámetro equivalente a position; asume por defecto un posicionamiento absoluto. Si queremos utilizar capas con posicionamiento relativo deberemos utilizar la etiqueta ILAYER, equivalente en todo a la primera, pero que provoca que la capa en cuestión utilice un posicionamiento relativo.

Posición y tamaño

Los parámetros para colocar la capa se llaman igual y se utilizan para lo mismo. Son LEFT, TOP, WIDTH y HEIGHT. Sólo podemos utilizar como unidades de tamaño los pixels, indicando directamente el número sin más aditivos.

Aparte de éstos, Netscape incluye los parámetros PAGEx y PAGEY. Son equivalentes a LEFT y TOP, excepto en el caso en que anidemos capas. En ese momento, y en el segundo caso, en las capas "hija" se asume que las coordenadas indicadas se refieren al interior de la capa "padre", mientras que con los parámetros page nos aseguramos de que se refieran a los márgenes del documento.

Cambio de aspecto

Aunque Netscape no admite OVERFLOW en sus etiquetas (más que nada porque el Communicator no soporta esta propiedad tampoco en CSS) si admite los recortes por medio del parámetro clip, al que deberemos asignar una lista de números equivalente a la propiedad del mismo nombre, cuando le asignabamos un rectángulo. De ese modo,

<ILAYER CLIP="100,0,2,4">

equivale a

<DIV STYLE="position: relative; clip:rect(100,0,2,4);">

Admite también los parámetros BGCOLOR y BACKGROUND, con los mismos efectos que tienen en la etiqueta BODY, es decir, cambiar el color o incluir una imagen en el fondo de la capa.

Capas

Aparte de Z-INDEX, que se utiliza de un modo equivalente al usado en CSS, las etiquetas LAYER e ILAYER admiten otro método por medio de los parámetros ABOVE y BELOW. Si tenemos el siguiente código:

<LAYER ID="capa1" Z-INDEX="3">
<LAYER ID="capa2" ABOVE="capa1">
<LAYER ID="capa3" BELOW="capa1">

Veremos que la etiqueta nombrada como capa3 sería la que estuviera debajo de todas las demás, capa1 en medio y capa2 encima.

En cuanto a VISIBILITY, se cambia el nombre de los valores, aunque la funcionalidad sea la misma. Esos valores son SHOW y HIDE. También admite el valor INHERIT, que indica a una capa "hija" que herede el valor que tenga en esta propiedad su capa "padre".

Otros

Aparte de los parámetros ya vistos, las capas de Netscape admiten un par de cosas más que conviene indicar. El parámetro SRC, por ejemplo, permite introducir en la capa el contenido de la página HTML que le pasemos como valor. Por otro lado, las etiquetas LAYER e ILAYER admiten los eventos OnMouseOver, OnMouseOut, OnFocus, OnBlur y OnLoad, siendo ésta la causa de que en ocasiones debamos usar estas etiquetas en Netscape 4.x en lugar del posicionamiento CSS.