La Página de Fernando

Última actualización: 10 de octubre, 1997

El ejemplo de Créditos
Bueno, si ya habeis visto cómo funciona el DHTML, a continuación encontrarás la explicación. Una vez te hayas leído la explicación, cópiate el código de la ventana que aparece y pruébalo en tu página. ¡No se te olvide bajarte la imagen!
1.- Montar las capas.
Lo primero es establecer las capas. Hay dos.

La primera está debajo y contiene el texto

La segunda, encima, es una imagen GIF que se mueve hacia arriba

Para ello, definimos la primera capa así:
<LAYER LEFT=10 TOP=10 NAME="text" VISIBILITY="hide">

....(aquí va el texto que quiero poner)....
</LAYER>
Observar que la capa, llamada "text" está en la posición 10,10 y está inicialmente escondida.
Ahora, la segunda capa la definimos de esta manera:
<LAYER LEFT=0 TOP=0 NAME="transpane" VISIBILITY="show">

<IMG SRC="trans.gif">
</LAYER>
Esta capa contiene una imagen blanca cuya parte de abajo se compone de puntos grises que se les ha aplicado el filtro de transparencia. De tal forma que cuando estos puntos comienzan a subir, van dejando entrever lo que hay debajo (primera capa).
Te recomiendo que te bajes la imagen en cuestión y la abras con algún programa de tratamiento de imágenes (como Photoshop) para entenderlo todo.
La capa esta visible.
2.- Programar el JavaScript que mueve la capa superior.
El código que mueve la capa es éste:
<script>
//la línea siguiente se dispara desde el tag de BODY (ver punto 3)
function start() {
//ahora asigno las dos capas a variables para poder moverlas luego

var bann=document.layers["transpane"];

var text=document.layers["text"];
//Hago visible la capa de texto y ejecuto la función de slidelayer,
//que mueve la capa hacia arriba

text.visibility="show";

slidelayery(bann,0,-4,20,-400);
}
//la función acepta el nombre de la capa, los incrementos de posición
//y tiempo y el punto vertical donde se para el asunto
function slidelayery(layer,sx,sy,inctime,ystop) {

layer.top+=sy;

layer.left+=sx;

if(((sy>0)&&(layer.topystop))) {

setTimeout('slidelayery(document.layers["'+layer.name+'"],

'+sx+','+sy+','+inctime+','+ystop+')',inctime);

}
}
//el IF hace que si la capa no ha llegado a su posición de max. 'y'
//se repita la función. El SETTIMEOUT hace que espere INCTIME
//antes de repetir la función.
</script>
3.- Lo último.
Es necesario disparar el evento en el momento en el que se abra la página. Esto se hace colocando lo siguiente en la línea de BODY:
<BODY TEXT="#000000" BGCOLOR="#ffffff" LINK="#006600" VLINK="#0000FF" ALINK="#FF0000" onload="start()">
Y con esto, ya está. Échale un vistazo a los otros ejemplos.

Si quereis contactar conmigo, no dudeis en hacerlo a fsch@elpais.es