HTMLpointHTMLpoint HTMLpoint.com


 Colocación con DHTML 3/3  

 por Massimiliano Valente

El lenguaje de script permite asociar a las características del CSS-P determinados eventos. Los eventos son un concepto típico de muchos lenguajes de programación, gracias a los cuales es posible hacer que el usuario interactúe con el ambiente en que opera. En el caso de páginas HTML, los eventos se manifiestan en las acciones relacionadas con el documento cuando el mismo reside en el navegador.

La gestione degli eventi de questo esempio è demandata al lenguaggio de script Java.
El código:

var totalLayersInLoop=4;
var layerNumShoweng=1;


establece cuántos son los layer de la página (cuatro) y cuántos de ellos deben visualizarse cuando se carga la misma (uno). Para aumentar el número de layer en la página, es necesario variar también el primer valor.

La instrucción "var" permite declarar variables y, en casos como éste, asignarles un valor. Las variables son, en JavaScript, representaciones de valores impostados utilizando una expresión y pueden ser globales o locales. Las primeras son utilizadas por todas las funciones del documento, mientras que las segundas son utilizadas sólo por algunas.

En el ejemplo considerado en estas páginas, Netscape permite manipular sólo ciertas secciones del documento (los layer predeterminados), con referencia al código:

layerRef="document.layers";

mientras que Internet Explorer hace que todo el documento pueda manipularse a través del código:

layerRef="document.all";

Las funciones:

function showLayerNumber(number)
function showLayer(layerName)
function hideLayer(layerName)


completan el código JavaScript relativo a la manipulación de los distintos niveles de layer.

Para que este ejemplo funcione correctamente es necesario impostar la función "enit()" dentro de la marca <BODY>:

<BODY onload="enit()" background="fondo.jpg">

Los enlaces se disponen e impostan con el código:

Muestra el ejemplo práctico

El primer layer es el que se visuliza por defecto, ya que está impostado como "visible", cuando los enlaces se refieren a los tres layer restantes. La formatación y la colocación de los enlaces están gestionadas por la marca DIV.

Una vez llegados aquí, es necesario insertar el código que invoca las funciones impostadas dentro de la marca <SCRIPT> y colocadas precedentemente gracias a las propiedades de las CSS-P. Los layer son cuatro y para cada uno de ellos se inserta una llamada mediante la marca ID:

Muestra el ejemplo práctico

Impostando dos nuevas funciones es posible crear dos enlaces que visualicen en secuencia los layer, sea hacia adelante (del primero al cuarto), sea hacia atrás (del cuarto al primero).

Para obtener este efecto dentro del código fuente del script hay que insertar la función:

Muestra el ejemplo práctico

para visualizar hacia atrás el layer. Y el código:

Muestra el ejemplo práctico

para visualizar los layer con avance progresivo. Cada layer es totalmente independiente de los demás lo que permite insertar, además del texto, componentes gráficos, tales como imágenes o GIF animados.

Ampliando los conceptos de colocación dinámica y adaptándolos a funcionalidades avanzadas de scripting, es posible crear efectos visuales muy interesantes.

La segunda demo de este artículo, por ejemplo, muestra cómo superponer un layer a otro, haciendo que dicha superposición sea como una especie de telón. Dicho de otro modo, el nuevo layer se visualiza de izquierda a derecha progresivamente.

Para comprender el código de este nuevo ejemplo, es necesario introducir el concepto de área de recorte, o sea "clip". Dicho elemento se asocia a un elemento colocado de modo absoluto en la página y define un área disponible para su visualización. De esta manera, todo lo que queda excluido del área "clip" no será visualizado en el documento. La impostación de las áreas de recorte se efectúa con los valores: top, right, bottom y left.

Las funciones "clipvalues()" y "clipBy()" gestionan, respectivamente, el área inicialmente visible de layer y el área que aparece en azul cuando se pulsa el enlace "Nuevo layer".

Las dos funciones "wipe":

permiten el efecto de visualización progresiva del layer de izquierda a derecha. El valor "250" se refiere a la anchura máxima en píxel del área de layer, que debe coincidir con el valor "width" introducido dentro de la hoja de estilo.

El modelo de objetos previsto por Netscape impone a JavaScript que vuelva a invocar individualmente los valores del área clip, al contrario de MSIE que los invoca todos al mismo tiempo
Una vez impostado correctamente el script Java, es necesario invocar la función onload dentro de la marca <BODY>:

onLoad="enit()"

La formatación y la colocación de los dos layer se realizan mediante el siguiente código:

Muestra el ejemplo práctico

El primero se refiere al layer visualizado al cargar la página, que debe tener unas coordenadas idénticas al segundo (top:70px; left:70px). El enlace "nuevo layer" invoca la función "wipe1" que permite superponer visualmente el otro nivel de layer.

El enlace "vuelve atrás" invoca la función "wipe2", que esconde nuevamente el segundo layer de manera que la página vuelva a su aspecto original.


  Vuelve a principio de página