El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Imágenes aleatorias con Javascript

Una de las formas más sencillas de transmitir la «vida» de un sitio web es ofrecer a nuestros visitantes algo nuevo en cada una de sus visitas. Con este sencillo Javascript podremos servir imágenes aleatorias, por ejemplo la cabecera que cambiará con cada carga de página.

  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. // La función devuelve un número entre 0 y "nums - 1"
  4. function getRandom(nums)
  5. {
  6.     var ranNum= Math.round(Math.random()*nums);
  7.     return ranNum;
  8. }
  9.  
  10. // Nos dice cuantas imágenes tenemos
  11. var numberOfImages    = 5;
  12. var randomNumber        = getRandom(numberOfImages);
  13.  
  14. // Creamos un Array con los nombres de las imagenes, introduce tantas como necesites pero recuerda actualizar también la variable numberOfImages
  15. var image = new Array(numberOfImages);
  16. image[0]="imagen1.gif";
  17. image[1]="imagen2.gif";
  18. image[2]="imagen3.gif"
  19. image[3]="imagen4.gif";
  20. image[4]="imagen5.gif";
  21.  
  22. // Escribimos la etiqueta img con una imagen aleatoria
  23. document.write("<img xsrc='" + image[randomNumber] + "' />");
  24.  
  25. --></script>

Se trata de un script muy sencillo que aprovecha una función que nos devuelve números de forma aleatoria. Es, por tanto, importante que todas nuestras imágenes estén renombradas según un patrón: imagen*.gif, por ejemplo.

Codigo, Javascript

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

6 Respuestas a “Imágenes aleatorias con Javascript”

Agrega tu comentario

  1. Aquí una forma más sencilla. Basado en este mismo script.

    “);
    –>

    Un saludo!

  2. Mucho me temo que el HTML se ha perdido en la traducción… Una pena, porque ahora me he quedado con la duda de tu método…

  3. CAIO dice:

    Hola amigos de webmaster libre….
    estas lineas de codigo es justo lo que necesitaba.

    Solo queria saber, como hacer que, una vez que aparece la imagen, hacerla hipervinculo y que se despliegue otra imagen (podria ser la misma pero mas grande) en una ventana nueva…. es mucho pedir?

    Saludos…

  4. jhflorian dice:

    Alguien tendra algún codigo que se pueda utilizar con animaciones flash o sea archivos *.SWF. Gracias por el buen còdigo.

  5. Carlos dice:

    Hola… q tal todo? Un favor, es que deseo que varias imágenes carguen al mismo tiempo pero en orden diferente cada vez que se entre en la página. La intención de esto, es que no haya preferencia en las fotos.

    Gracias,

Trackbacks/Pingbacks

  1. [...] Hace unos días os comentaba una forma muy sencilla de incluir imágenes de forma aleatoria en nuestros sitios web mediante Javascript. Pero claro, si el usuario no tiene habilitado el soporte para Javascript no funcionará. [...]

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 2 años. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández