Pase de diapositivas con DHTML

En este taller de DHTML vamos a crear un pase de diapositivas, en el que se mostrarán varias imágenes en un mismo espacio, que se irán visualizando con un efecto cortina. Todo ello con Javascript y CSS compatible con todos los navegadores.

Es decir, vamos a tener varias imágenes en varias capas, colocadas en el mismo espacio de la página, que se mostrarán una detrás de otra. El efecto cortina trata simplemente de mostrar la imagen línea a línea, en lugar de que aparezca de golpe.

Lo mejor para saber exactamente lo que deseamos hacer es ver el ejemplo en marcha.

El HTML y CSS

Veamos primero cómo crear el HTML, junto con CSS, que nos va a servir para disponer de varias capas en la misma posición.

Primero definimos un CSS que indica la posición y otras características de las capas que van a contener las imágenes.

<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>

Cabe destacar que en este caso todas las capas están visibles, aunque se les ha aplicado un cliping (recorte) por el que no se muestra ninguna parte de la capa. Luego utilizaremos este atributo de CSS (clip) para variar ese recorte de la imagen, de modo que se muestre línea a línea.

Ahora veremos las capas que van a participar en nuestro pase de diapositivas. En cada una de las capas introducimos una de las imágenes que vamos a utilizar.

<div id="c1" class=estilocapa>
<img src="images/ancares.jpg" width="155" height="80" border="0">
</div>
<div id="c2" class=estilocapa>
<img src="images/aranjp.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c3" class=estilocapa>
<img src="images/aranjuez.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c4" class=estilocapa>
<img src="images/austral.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c5" class=estilocapa>
<img src="images/basel.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c6" class=estilocapa>
<img src="images/bombay.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c7" class=estilocapa>
<img src="images/brujas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c8" class=estilocapa>
<img src="images/bruselas.jpg" width="155" height="80" alt="" border="0">
</div>
<div id="c9" class=estilocapa>
<img src="images/burgos2.jpg" width="155" height="80" alt="" border="0">
</div>

En total tenemos 9 capas, que hemos llamado con los nombres c1, c2... c9.

Javascript para realizar el pase de diapositivas

Lo primero será incluir las librerías X-Library en la página, para tener acceso a las funciones DHTML que vamos a utilizar en el ejercicio.

<script type='text/javascript' src='../x/x_core.js'></script>

Ahora veamos el código necesario para realizar la animación, por partes, para tratar de explicarlo de una manera sencilla.

Usuarios que han visto este tema también han visto...

- Efectos de transición
- Ventanas que no se comen los navegadores
- Efectos en el background en DHTML
- Escritura en una Capa en DHTML
- Efecto cortina con DHTML

- Versión imprimible de este documento

- Enviar por e-mail este documento