Imagenes aleatorias con enlace | Oloblogger Juan quería abundar en el truco de las imágenes aleatorias , para que estas fueran a su vez enlaces. Lo de poner un enlace a cada imagen (d...

18 de diciembre de 2008

Imagenes aleatorias con enlace

Juan quería abundar en el truco de las imágenes aleatorias, para que estas fueran a su vez enlaces. Lo de poner un enlace a cada imagen (distinto para cada una de ellas), puede tener diversas utilidades, pero en este caso, creo que va a servir para colocar distintos banners publicitarios ocupando sólo el espacio de uno. Cada vez que la página ser recargue, se mostrará uno de ellos de manera aleatoria. Como cada banner tiene que llevar su propio enlace... pues eso.

El código-tipo es este:

<script type="text/javascript">
enlace = new Array();
enlace[0] = '<a href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';
enlace[1] = '<a href="URL_ENLACE2"><img src="URL_IMAGEN2"/></a>';
enlace[2] = '<a href="URL_ENLACE3"><img src="URL_IMAGEN3"/></a>';

aleatorio = Math.random() * (enlace.length);
aleatorio = Math.floor(aleatorio);
document.write(enlace[aleatorio]);
</script>

Para cada imagen/enlace adicional, habría que añadir un nuevo elemento al array, con la misma estructura que los que aquí se muestran. Importante seguir la secuencia de ordinales (0, 1, 2,...).

Dentro de A o de IMG, podeis incluir también CSS mediante una etiqueta STYLE y sus correspondientes atributos.

Seguro que hay otra forma más eficiente de hacer lo mismo, pero mis conocimientos de Javascript no dan para más. Mientras a alguien se le ocurre algo mejor, podeis utilizar este hack que seguro que funciona.

¿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.

Compartir
Copy URL

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

follow us in feedly

56 comentarios :

  1. ¡Eres un crack! Ahora si que si. ¡Ole! Gracias tío.

    ResponderEliminar
  2. Amigo te sigo desde hace tiempo y estas enlazado en mi blgo y por ello paso a desearte un feliz fin de semana..

    Gracias por todas la ayuda que nos dan.. un abrazo

    ResponderEliminar
  3. Feliz fin de semana, Balovega y ¡Feliz Navidad! a tí y a todos los lectores, visitantes accidentales, simpatizantes, etc.

    ResponderEliminar
  4. Gracias amigo por las respuestas.
    Ahora si lo que lo haré en el mi blog
    lo usaré, de estoy seguro

    gracias

    feliz navidad y feliz año!!!

    ResponderEliminar
  5. Anónimo31/1/09 3:57

    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,

    ResponderEliminar
  6. Supongo que lo que quieres es mostrar siempre un número determinado de imágenes, pero que cada vez que cargue la página, salgan en un orden distinto.

    Lo que se explica aquí es para que cada vez que entremos en la página, salga una distinta, pero sólo una.

    Dependiendo de lo que quieras exactamente, puedes conseguir algo parecido repitiendo las tres últimas líneas del código...

    aleatorio = Math.random() * (enlace.length)
    aleatorio = Math.floor(aleatorio)
    document.write(enlace[aleatorio])

    ...tantas veces como imágenes quieres mostrar. Lo que ocurre es que, como realmente es al azar, lo más probable es que repita alguna, una o más veces en detrimento de otras imágenes.

    Le daré una vueltecita a la idea que creo que se puede solucionar.

    ResponderEliminar
  7. COMO HAGO PARA PONER EL COSO ESE "SUSCRIBIR TEMAAS" Y TODAS ESAS PALABRITAS KE GIRAN AL ARRIBA?
    Y DONDE PONDRIA LOS CODIGOS KE PASAS?
    POR FAAVOR RESPONE
    MANDAME UN E-MAIL A MI MSN

    mordiscoo.-@hotmail.com

    ResponderEliminar
  8. Mikiithaa, las instrucciones para el "coso" que gira las tienes en la siguiente dirección:

    http://oloblogger.blogspot.com/2008/09/nube-de-etiquetas-3d-blogumus.html

    ResponderEliminar
  9. Perdon Oloman por hacerte la otra pregunta anterior con este pos que no lo había visto, me lo respondiste. Gracias por tu ayuda !!

    ResponderEliminar
  10. Je, je... ¡y yo te acabo de contestar en el otro porque este lo he visto después!

    ResponderEliminar
  11. Hola de vuelta, yo. Cada ves que entro ha este blog, me encuentro con cosas interesantes.

    Esta te iva a preguntar ¿como puedo hacer para que salgo de forma aleatoria videos, como de You Tube?

    Bueno se podrá? , creo que todo, deseo saber si sabes.

    Desde ya muchas graicas !!

    ResponderEliminar
  12. Hola CCS. La mecánica es la misma que para otros sistemas de mostrar un elemento aleatorio y que ya en distintos post hemos publicado. No obstante, hemos hecho un post específico hoy para explicarlo de nuevo.

    ResponderEliminar
  13. Hola Oloman. Justo tengo la misma duda del anónimo del comentario numero 6. Sabes ya, ¿Cómo hacerlo en ese caso?

    Espero tu respuesta :=)

    Un abrazo y éxitos

    ResponderEliminar
  14. Hola KI. Hoy por hoy, todavía no me he puesto en serio a buscar una solución buena. La fácil es repetir las tres últimas líneas tantas veces como imágenes quieras que salgan. El problema es que existe la posibilidad por la aleatoriedad total del sistema, de que te muestre imágenes repetidas. A menor número de imágenes en la matriz, mayor posibilidad de repetición. Si en tu caso eso no es importante o quieres poner muchas imágenes, de momento puede que te valga este sistema.

    Si quieres mostrar dos o tres cada vez, otra chapucilla sería incluir en cada elemento de la matriz esas dos o tres imágenes en lugar de una.

    ResponderEliminar
  15. Gracias por la ayuda.

    ResponderEliminar
  16. Amigo, muy buena la entradas, me ha servido muchisimo, de verdad, MUCHAS GRACIAS.

    Bendiciones!.

    ResponderEliminar
  17. Anónimo3/4/10 0:59

    fabuloso funciona perfecto gracias..

    solo una pregunta como hago para mostrar 10 imagenes aleatorias a la vez de una carpeta de 100?

    ResponderEliminar
  18. Para 100 te va a resultar muy laborioso, pero lo tienes explicado en esta otra entrada. Saludos.

    ResponderEliminar
  19. Anónimo6/7/10 22:28

    Te cuento que soy de los pocos que se animan a opinar en tu blog, pero debo agradecerte por tus enseñanzas y compartir con la gente tus conocimientos. Gracias por hacer de mi blog un sitio mas interesante. Como decimos en Colombia "Eres un berraco". Mil gracias Oloman

    ResponderEliminar
  20. Vale. Me quedaré con la versión colombiana de la expresión, porque la española no es muy buena que digamos :D
    Saludos

    ResponderEliminar
  21. Bueno oloman te cuento que era yo el del anterior comentario, solo que no pude registrarme con mi nombre no se porque. En todo caso muchisimas gracias y tienes razon en cuanto a lo de las expresiones por paises, entonces a la version colombiana eres un Berraco. Mil gracias de nuevo por compartir tu conocimiento con quienes no somos muy expertos como yo.

    ResponderEliminar
  22. No hay de qué. Para mí es un hobby. ;)

    ResponderEliminar
  23. Muchas gracias, muy bueno este truco :D:D:D

    ResponderEliminar
  24. Estoy actualizando la web y lo hago mientras en un blog de pruebas: http://malagarec.blogspot.com/

    El caso es que este script funciona a la perfección si lo coloco en un widget en el sidebar. En el momento que entro en la plantilla e intento colocarlo en el lugar que actualmente ocupa la imagen de 250x90 (esquina superior derecha) no aparece nada, se queda en blanco. He probado introduciendo el atributo "position" pero no hay manera.

    ¿donde podría estar el fallo?

    ResponderEliminar
  25. Gracias! estaba buscando la respuesta! GRACIAS POR ILUMINARME!

    ResponderEliminar
  26. Tuniti, el que no te funcione en la plantilla es cosa de Blogger, que es muy delicao y no interpreta las comillas dobles cuando se teclean en esa parte.

    Prueba el mismo código pero cambiando las comillas simples (') por &#39; y las comillas dobles(") por comillas simples (').

    ResponderEliminar
  27. Acabo de probarlo y sigue apareciendo en blanco. Gracias de todas formas.

    ResponderEliminar
  28. Un verdadero Crak, sí señor. Pero, ¿puedes rizar el rizo?

    ¿Cómo haríamos para que el enlace sea en una ventana aparte? (igual que en html está target="_blank" ¿como sería en javascript?)

    Si me solucionas eso serás mi HEEEEEROE.

    Saludos.

    ResponderEliminar
  29. Jesús iPhone, si no lo has solucionado a estas alturas, ya puedes estar buscándome una medalla. Lo que va dentro de cada elemento de la matriz enlace[x] es HTML puro, por lo que sólo tendrías que añadir el _blank a cada uno de los enlaces que figuran alli. Ejemplo:

    enlace[0] = '<a target="_blank" href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';

    ResponderEliminar
  30. Yo qisiera saber mas o menos para q es el enlace de la imagen? Si ya esta el del url? Q tngo q poner en el enlace de la imagen? Yo pongo el enlace q qiero q salga en la del url y sirve pero en el de la imagen no, si me entienden?

    ResponderEliminar
  31. El ventana nueva que sale lo hace con el enlace del url o el de la imagen? osea con esta: a href="URL_ENLACE1" o sale con esta img src="URL_IMAGEN1"/

    Porq yo le puse target="_blank" para q saliera en otra ventana, pero lo q qiero saber en realidad q pongo en tonces en el url y en imn src?

    ResponderEliminar
    Respuestas
    1. Son dos cosas distintas. Lo que va en el SRC es la dirección de la imagen que se verá. Lo que va en el HREF es la dirección de la página a la que se accederá cuando pinches en la imagen. Evidentemente pueden ser la misma dirección para que se vea la imagen en otra ventana, pero no es lo normal.

      Así que URL_ENLACE1 representa la dirección de destino y URL_IMAGEN1 la dirección de la imagen a mostrar.

      Eliminar
    2. Muchas gracias, de todas maneras este codigo no me sirvio tuve q buscar otro porq este no me servia mucho, una que otra vez me salia la imagen cuando daba clic, un 10% me sirvio lo demas nada ni señaas de todas maneras gracias! Oye qisiera hacerte una pregunta, como hago un TEST o un cuestionario para mi pagina en facebook? Yo tengo una pagina en Facebook y ya cree la aplicacion de las imagenes, bueno ahora qiero crear la aplicacion sobre un test como hagoo oloman?

      Eliminar
    3. De ese tema no tengo la menor idea. Sólo conozco la aplicación "Preguntas", una especie de encuestas que se pueden abrir desde el cajetín del estado.

      Eliminar
  32. Muchas gracias, me sirvio perfectamante.
    Un saludo

    ResponderEliminar
  33. muy bueno justo lo que buscaba saludos :I

    ResponderEliminar
  34. Hola, intenté aplicar un código y no logré en el sitio correcto, pero sí quedó grabado en la portada de mi blog ¿Cómo le hago para borrarlo de ahí?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola. Por lo que he visto debe ser "eso" que te sale justo encima de la cabecera.

      De ese texto que te sale ahí, copia las primeras palabras y búscalas en tu plantilla. Una vez localizadas borras todo el trozo. Creo que está entre el <body> y la primera etiqueta META.

      Eliminar
  35. Gracias Oloman,
    según yo, hice exactamente lo que me dijiste y nada,localicé el trozo en la plantilla y lo borré, pero en blog, sigue apareciendo, lo mas seguro es que algo no estoy haciendo bien.
    Oloman, soy una completa neófita en estos asuntos, si me lo pudieras explicar con manzanitas?
    Estupenda semana.

    ResponderEliminar
  36. Listo Oloman,
    cambié de plantilla y asunto arreglado, ya no aparece ese código en mi portada.
    Muchas gracias por tu labor de apoyarnos, felicidades por tu blog.
    Saludos

    ResponderEliminar
  37. Hola Oloman,
    estoy iniciando un blog de ayuda, por razones personales lo tengo con seudónimo.
    Me gustaría saber si entro a Google+ o a otro lado, con la finalidad de dar a conocer mi blog, nadie sabrá que soy yo? O que situaciones debo evitar para que nunca salga mi nombre verdadero?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. En un principio sólo debes asegurarte de que cuando publiques algo en ese blog, estés logueada con el pseudónimo y no con tu cuenta habitual. Lo que pasa es que los humanos no somos tontos del todo y si empiezas a propagar por las redes sociales artículos de ese otro blog, cualquiera puede suponer que es tuyo. Es como cuando yo hablo de Musicae Memorandum.

      Eliminar
  38. Casi. casi te capisco Oloman,
    La cuenta está a mi nombre, el blog, lo abrí con un seudónimo, no por mí, sino con el fin de no herir o afectar a personas involucradas en el caso. Me supongo que si tu quisieras, podrías rastrear ese blog, por mis datos de esta cuenta, pero la gente común, que no sabe mucho, le sería mas complicado. Solo deseo proteger mi iddentidad lo mas que se pueda. ¿Si entro a Google+ me conviene? ¿De que manera puedo hacer llegar mi blog a mas personas, pero con protección de identidad...digo, hasta donde se pueda, finalmente lo único que deseo es apoyar a otras personas.

    ResponderEliminar
    Respuestas
    1. Lo que quería decir es que lo mejor sería abrir ese blog con una nueva cuenta de usuario y luego publicar siempre con ese nuevo usuario. Así será imposible relacionar tu cuenta actual con ese nuevo blog. Pero eso sólo es a efectos poder demostrarlo. Otra cosa, como te decía, es que se note que es tuyo.

      Lo de hacer llegar tu blog a más personas es lo que todo el mundo quiere. Lo único que puedes hacer fácilmente es difundirlo por las redes sociales o que tus amigos lo hagan.

      Eliminar
  39. Gracias Oloman,
    entendido y anotado.
    feliz fin de semana
    Sor

    ResponderEliminar
  40. Otra vez Oloman,
    no he podido hacer ningún truco, uno de los intentos fue el de explosión de estrellas, pero copié el copié el código y nada ¿Qué estoy haciendo mal o qué me falta por hacer?
    Porfa si pudieras explicármelo de una manera sencilla, apenas estoy iniciando en este aprendizaje.
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. No recuerdo haber explicado nada de una explosión de estrellas. Mejor plantea tu duda directamente en la entrada que leiste y así me resulta más fácil seguirte.

      Eliminar
  41. Oloman, no sé si puedes responder a mi consulta ya que he visto que este tema es medio viejo, pero quiero preguntar cual sería la forma de incluir este código en una parte de la plantilla que no se hace mediante añadir elementos html, sino que está en el footer del artículo, inmediatamente después de terminado el artículo. allí no puedo hacer que el código aparezca.

    ResponderEliminar
    Respuestas
    1. Prueba a ajustar este código añandiéndole CDATA según se explica en la segunda opción de este otro post.

      Eliminar
    2. Gracias por la respuesta, pude hacerlo incluyendo un código parecido a este pero con una variable, te lo dejo para complementar la información del artículo: http://santyweb.blogspot.mx/2009/12/menu-de-imagenes-aleatorias.html

      Saludos.

      Eliminar
  42. Varios caminos llevan a Roma, pero si te fijas, ese código lleva lo que te dije: //<![CDATA[

    ResponderEliminar
  43. SOS UN MAESTRO!!!! No sabés cómo estaba buscando esto...
    GRACIAS!!!!
    Veo que aquí puedo tener solución a un montón de inquietudes.
    GRACIAS DE NUEVO!!!

    ResponderEliminar
  44. Muy buen aporte , se agradece :D

    ResponderEliminar