Este es el primer ejemplo. Es muy sencillo y, la verdad, poco agradale a la vista pero muy instructivo. Muestra como colocar capas, moverlas y hacerlas aparecer y desaparecer.
1.- Montar las capas.
Lo primero es establecer las capas. Hay tres.
- La capa de 'entrada' es la palabra 'Hola'
- La segunda capa es la frase de 'Esto es un pequeño ejemplo de uso de capas.
- La tercera capa es la palabra 'Adios'
Para ello, definimos la capa de entrada así:
<LAYER NAME="entrada" VISIBILITY="show" TOP=-50 LEFT=120>
<FONT FACE="Arial" SIZE="5" COLOR="#0000FF">
<B>Hola</B>
</LAYER>
Observar que la capa, llamada "entrada" está en la posición -50,120 (es decir, fuera de pantalla) y está inicialmente visible.
Ahora, la segunda y tercera capa las definimos de esta manera:
<LAYER NAME="segunda" VISIBILITY="hidden" TOP=50 LEFT=40>
<BR><BR><BR>
<FONT FACE="Arial" SIZE="3" COLOR="#0000FF">
Esto es un pequeño ejemplo<BR>
de uso de capas.
</FONT>
</LAYER>
<LAYER NAME="tercera" VISIBILITY="hidden" TOP=80 LEFT=120>
<BR><BR><BR>
<FONT FACE="Arial" SIZE="5" COLOR="#0000FF">
Adios
</FONT>
</LAYER>
Estas dos capas están escondidas incialmente. Ya las haremos visibles en su momento.
2.- Programar el JavaScript que mueve las capas.
Lo primero es mover la capa de entrada ('Hola'):
<SCRIPT LANGUAGE = "JavaScript">
<!--
//la línea siguiente mueve la capa de arriba a abajo,
//10 pixels a la vez.
//Cuando llega a su posición (y=140), se dispara
//el siguiente evento (borrarPrimera)
// al cabo de .5 segundos.
function entradaPrimera() {
primeraCapa.offset(0, 10);
if (primeraCapa.top < 140) setTimeout('entradaPrimera()', 50);
else setTimeout('borrarPrimera()',500);
}
//la sig. función hace un clipping dinámico desde
//la izquierda cada 10 pixels.
//Al final, dispara el siguiente evento
function borrarPrimera() {
primeraCapa.clip.left += 10;
if (primeraCapa.clip.left < 200) setTimeout('borrarPrimera()', 50);
else entradaSegunda();
}
//Hago visible la capa segunda y disparo otro evento.
function entradaSegunda() {
segundaCapa.visibility = "show";
setTimeout('segundaSalida()', 900);
}
//Muevo la segunda capa hacia abajo.
//Disparo otro evento.BR>
function segundaSalida() {
segundaCapa.offset(0, 10);
if (segundaCapa.top < 250) setTimeout('segundaSalida()', 50);
else terceraCapa.visibility = "show";
}
//Aquí asigno nombres a las capas e inicializo el
//primer evento
terceraCapa = document.layers["tercera"];
segundaCapa = document.layers["segunda"];
primeraCapa = document.layers["entrada"];
entradaPrimera();
//-->
</script>
Y con esto, ya está. Échale un vistazo a los otros ejemplos.
Si quereis contactar conmigo, no dudeis en hacerlo a fsch@elpais.es
