El script tiene dos partes, en la primera definimos la una funcion con la lista de las posibles imagenes a mostar, y la segunda parte es la llamada al script en el lugar en donde querramos mostrar la imagen.
Dentro de las etiquetas <head> y <head> de la pagina debemos agregar las siguientes lineas:
<script type="text/javascript">
function MostrarImagenes() {
var Imagenes = new Array();
// IMAGENES
Imagenes[0] = 'http://farm2.static.flickr.com/197/579000_cdb5b74d8_o.jpg';
Imagenes[1] = 'http://farm2.static.flickr.com/1109/5859_fa24792397_o.jpg';
Imagenes[2] = 'http://farm2.static.flickr.com/126458120_d68c18099e_o.jpg';
var j = 0;
var p = Imagenes.length;
var preBuffer = new Array();
for (i = 0; i < p; i++){
preBuffer[i] = new Image();
preBuffer[i].src = Imagenes[i];
}
var whichImage = Math.round(Math.random()*(p-1));
document.write('<img src="'+Imagenes[whichImage]+'">');
return true;
}
</script>
En el array "Imagenes" debemos cargar las direcciones de las posibles imágenes que queremos mostrar. Luego, debemos reemplazar la etiqueta <img> en donde tengamos la imagen actual por la llamada a la función. Por ejemplo, si tenemos algo asi:
<div id="header">
<img src="imagen.jpg" alt="logo">
</div>
Debería quedarnos asi:
<div id="header">
<script type="text/javascript">MostarImagenes();</script>
</div>
NOTA: En un principio probe el script con imágenes alojadas en Picasa y funcionaba erraticamente. Muchas veces no llegaba a mostrar ninguna imagen. Al utilizar el link de las imagenes directamente en el browser, algunas veces me preguntaba para bajarmelas en vez de mostarmelas. Cuando usamos imagenes hosteadas en un servidor propio o en Flickr funciona perfectamente. Alguna idea al respecto?
1 comentario:
Gracias, me salvaste la raja. Necesitaba esta info, ya que se me había olvidado como se hacía este script...te debo una ronda de chupitos.
Publicar un comentario