Imágenes aleatorias | Oloblogger En una anterior ocasión explicamos como generar y mostrar frases aleatorias para, por ejemplo, lucir nuestras citas favoritas cada vez que ...

12 de febrero de 2008

Imágenes aleatorias

En una anterior ocasión explicamos como generar y mostrar frases aleatorias para, por ejemplo, lucir nuestras citas favoritas cada vez que se cargue nuestra página. Algun@s pidieron el mismo truco pero para mostrar imágenes distintas al azar en cada ocasión que se nos visita. Pues helo aquí...

monigote

Facilito, facilito. Sólo hay que copiar este código dónde queramos mostrarlas.

<script language="JavaScript">
function ver_imagen()
{
n=0;
this[n++]="DIRECCION IMAGEN 1";
this[n++]="DIRECCION IMAGEN 2";
this[n++]="DIRECCION IMAGEN 3";
this[n++]="DIRECCION IMAGEN 4";
this.N=n;
}
var imagen=new ver_imagen();
src= imagen[ Math.floor(Math.random() * imagen.N) ] ;
document.write("<img src="+src+">");
</script>

Hay que sustituir cada DIRECCION IMAGEN, por la dirección URL de nuestras propias imágenes y listo.

Para cada imagen, una línea this[n++]="DIRECCION IMAGEN 1";.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Y muchos más artículos interesantes si nos sigues en...

15 comentarios :

  1. hola como va todo yo aqui de nuevo molestando jejeje tengo una pregunta que les interesara a todos ¿como hacer una galeria de fotos Coppermine Photo Gallery? porque eh intentando en varias paginas de internet y me resulta super dificil si tu sabes porfa explicalo
    chau!! cuidate

    ResponderEliminar
  2. En este enlace he encontrado una explicación muy clarita.

    Lo que ocurre es que con Blogger no vas a poder instalar este sistema, porque creo que ni soporta PHP ni bases de datos SQL.

    Prueba a echar un vistazo a esta entrada sobre una aplicación para mostrar tus imágenes, que además te permite crear galerias.

    Un ejemplo en Sin Entradas.
    Saludos,

    ResponderEliminar
  3. Hola Oloman! Se que tiene algún tiempo esta entrada ya, pero aún así quería hacerte una pregunta, y es si sabes si sería posible aplicar este código al fondo del blog. Estoy rediseñando un blog que tengo con unos colegas y quería poner una imágen fija de fondo y cómo no se muy bien qué imagen poner exactamente se me ha ocurrido que quizá podría hacerse para que saliesen imágenes aleatorias...

    Un saludo!!:-D

    ResponderEliminar
  4. Pues... le echaré un vistazo Agustín, pero como ando cortito de tiempo, ve eligiendo un fondo por si tardo
    :-)

    ResponderEliminar
  5. :) ok ok, tranquilo, no hay prisa ninguna, que yo también me lo estoy tomando con mucha calma.

    Saludos!

    ResponderEliminar
  6. Respuesta a tu consulta recién publicada, Agustín. "Fondos aleatorios"

    ResponderEliminar
  7. Es genial este truco. Solo tiene una pega que no se cómo resolver.
    Me gustaría incluir un enlace en cada una de las imágenes. De esto modo, la función de "espacio publicitario" a la que he dedicado este truco sería el idóneo. ¿Cómo puedo hacer esto? Muchas gracias por adelantado.

    ResponderEliminar
  8. Hola Juan. Como no controlo demasiado en Javascript, no sé meterlo dentro, así que cambia

    var imagen=new ver_imagen();
    src= imagen[ Math.floor(Math.random() * imagen.N) ] ;
    document.write("<img src="+src+">");
    </script>

    por esto otro

    function imp_imagen()
    {
    var imagen=new ver_imagen();
    src= imagen[ Math.floor(Math.random() * imagen.N) ] ;
    document.write("<img src="+src+">");
    }
    </script>

    <a href="URL-a-enlazar"><script type="text/javascript">imp_imagen()</script></a>

    Esto seguro que funciona.

    ResponderEliminar
  9. No lo entiendo... parece que sólo puedo poner un enlace, y que este será el mismo para todas las imágenes, ¿o me equivoco? Bueno, voy a probar. Gracias y un saludo.

    ResponderEliminar
  10. Tal vez no me expliqué bien. Lo que yo quería es poner un enlace "diferente" en cada imagen. ¿Sabes cómo?

    ResponderEliminar
  11. Ya creo que lo tengo claro Juan. A ver si el post que he publicado hoy responde a tu pregunta

    Saludos.

    ResponderEliminar
  12. Hola que tal mi nombre es Christian y te doy 10 por el blog que tenes.

    Ahora, podrías ayudarme , mira en mi blog tengo una sección para los banner de 125x125 son tres y están uno a lado del otro estés es la plantilla:

    http://vibrant-btemplates.blogspot.com/

    bueno lo que deseo, es que cada imagen cambien de forma aleatoria con enlaces diferentes ¿como podria hacerlo en este caso?

    desde ya muchas gracias

    ResponderEliminar
  13. CCS, esta es una manera de hacerlo, aunque tendrás que modificar algo el código para ajustarlo a tu plantilla.

    ResponderEliminar
  14. Hola, como podria hacer para que esta imagen cambie cada cierta cantidad de segundos?

    ResponderEliminar
  15. Hmmm... Plata creo que lo mejor para eso si no son demasiadas imágenes, sería utilizar un gif animado como el que, casualmente, ilustra esta entrada.

    Si son muchas, quizás te interese utilizar este otro sistema:

    http://oloblogger.blogspot.com/2010/09/script-para-programar-elementos.html

    ResponderEliminar