SLIDESHOW

Slideshow es una herramienta compuesta por Javascript+CSS. Es una forma elegante de mostrar diferentes imágenes con un efecto de transición entre las distintas imágenes. Podemos utilizarlo solo para mostrar imágenes aunque una de las principales utilidades que le veo es poder utilizarlo como rotador de banners. Cada vez que cambia la imagen también cambia el vínculo a la página, como podemos ver en el siguiente ejemplo:

Bien procedamos a explicar el código para elaborar el Slideshow:

• En primer lugar deberemos hacer una llamada al fichero Javascript, llamado xfade2.js:

<script type="text/javascript" src="xfade2.js"></script>

• También deberemos incluir el fichero CSS:

<link rel="stylesheet" href='slideshow1.css' type="text/css" />

• Editando ese fichero CSS podremos ajustar el rotador de imágenes a nuestras necesidades y gusto. Para el ejemplo de arriba he utilizado imágenes de 200x200, pero podemos utilizar otros tamaños simplemente editando el fichero slideshow1.css. Veamos el contenido del fichero CSS.

*
{
margin: 0;
padding: 0;
}
#rotator
{
border: 1px solid #000;
overflow: hidden;
margin: 50px auto 10px;
position: relative;
width: 200px;
height: 200px;
}
#rotator img
{
border: 0;
width: 200px;
height: 200px;
}
p
{
text-align: center;
}

Como vemos si queremos modificar el tamaño de la ventana, tan sólo deberemos cambiar los valores width y height dentro de #rotator y #rotator img. La forma de presentar luego el rotador de imágenes va a gusto del consumidor.
• Por último el código HTML sería el siguiente:

<div id="rotator">
<a href="http://vínculo"><img src="imagen1.jpg" alt="Tips/trucos para Linux" /></a>
<a href="http://vínculoimg2"><img src="imagen2" alt="Gana dinero leyendo e-mails" /></a>
.... <!-- Podemos poner todas las imágenes que queramos, siempre metidas entre el div rotator-->
</div>

Con éstos sencillos pasos ya tendríamos configurado nuestro rotador de imágenes. |Descargar código con ejemplo|