Rotador de imágenes

Es una forma de mostrar diferentes imágenes cambiantes con un efecto de transición entre imagen e imagen muy lindo.
Puede utilizarse para mostrar cualquier tipo de imágenes teniendo en cuenta que todas han de tener las mismas medidas.
Es ideal para usarlo con banners o botones de otras web, ya que el código incluye la posibilidad de incluir un vínculo o enlace en cada imagen.
Podéis ver una demostración en la sidebar de mi blog de pruebas, en forma de mini-banners con enlace a cada página.

[1] Nos descargamos el archivo xfade2.js a nuestro PC, lo descomprimimos y lo subimos a un alojamiento de archivos.
Una vez obtenida la url del archivo, lo colocamos de esta manera antes del </head> de nuestra plantilla:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

[2] A continuación colocamos unas líneas de CSS en la plantilla justo antes de ]]></b:skin>:

/* ROTADOR DE IMAGENES
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 2px solid #CC0000;
overflow: hidden;
margin: 10px ;
padding:2px;
position: relative;
width: 200px;
height: 50px;
}
#rotator img
{
border: 0;
width: 200px;
height: 50px;
}

Donde dice: width: 200px; y height:50px;  colocamos los valores del ancho (width) y alto (height) de las imágenes que vayamos a usar.

[3] Ya solo nos queda incluir el código necesario en un gadget HTMLJavascript para mostrar el rotador de imágenes e incluir los cambios necesarios :

<div id="rotator">
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->
</div>

 En "alt" y "title" colocaremos un texto explicativo, por ejemplo el título de la web a la que enlaza la imagen, así los navegadores mostrarán un cartelito (tooltip) con ese texto al poner el ratón sobre la imagen.