Imagen flotante al azar

8 de enero de 2010 66 comentarios ,
El otro día AlexTfe26 me compartió un código que algunos habían solicitado.
Ya sabemos cómo poner una imagen flotante en una esquina del blog; esto es, tener una imagen que no se mueva, que se conserve estática aun cuando se baje el scroll de la página.
Pero qué mejor que esa imagen pueda ser distinta, es decir, que cambie al azar cada vez que se recarga la página.

Para agregarla a tu blog sólo entra en Plantilla | Edición de HTML y antes de </body> pega esto:
<script language='JavaScript'>
imagenes = new Array(3)

imagenes[0] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>&quot;
imagenes[1] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>&quot;
imagenes[2] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>&quot;

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

</script>

Agrega donde se indica las URL de las imágenes que quieres para tus imágenes estáticas.
Si quieres agregar otra imagen añade otra línea como esta:
imagenes[3] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>&quot;

Recuerda que por cada línea que agregues deberás asignarle un número (color azul) y al inicio del código deberás poner el número total de imágenes que tienes (color verde).

Para comprobar los resultados entra varias veces en este blog de pruebas o presiona la tecla F5 y verás que cambia la imagen flotante que se encuentra en la parte inferior derecha.


66 comentarios en:

" Imagen flotante al azar "

  1. Hola, potro,esa opcion es solo para tener la imagen ahi, sin cerrar cierto? Ahun no hasa conseguido el codigo para cerrarla? Saludos.

    ResponderEliminar
  2. mmmmm...interesante!!!! Se me ocurre que podría utilizarla para promocionar los mejores post mediante una imagen (como por ejemplo estoy haciendo en la parte superior con el post del Cohete Casero). Y así captar la atención de nuevos usuarios. Sólo una pregunta por si en algun momento lo implemento ¿se le agrega un link al igual que en el caso anterior?

    Gracias!!!


    Un abrazo!!!

    ResponderEliminar
  3. Borest, aún no me he dado tiempo para ver ese código, pero lo tengo en mente.

    PepeX, gracias por tu visita.

    brother, puedes encerrar el script con el código del enlace pero sería sólo un sólo enlace para todas las imágenes. Un abrazo!

    ResponderEliminar
  4. Muy bueno, me gusto
    pero se pueden agregar tantas imagenes yo quiera
    o no,
    muy buen truco

    ResponderEliminar
  5. gemial, porque se me ocurre un buen lugar para ponerlo.

    ResponderEliminar
  6. Alex, claro pero como en todo código tampoco hay que abusar para que funcione sin problemas.

    El Venado, yo igual ando pensando en hacer algo con el código ;)

    ResponderEliminar
  7. Gracias el potro, mi blog esta saliendo para adelante poco a poco con tu ayuda, la verdad que todo lo que he aprendido es gracias a tu blog.
    Un saludo.

    ResponderEliminar
  8. Wow...que fácil que haces todo! Gracias por la data.... :)


    Un abrazo!!!

    ResponderEliminar
  9. En realidad no fui yo, fue AlexTfe26 el que me pasó el tip ;)

    Un abrazo!

    ResponderEliminar
  10. Hola de nuevo.Lo primero agradecerte la ayuda que me has dado me parece la ostia el trabajo que haces de verdad.Mil garcias
    y lo segundo era para preguntarte haber si hay alguna forma de poner videos de la misma forma k pones una imagen flotante fuera del blog.Gracias.

    ResponderEliminar
  11. Hola Urko,

    Sí se puede, en estos días publico primero cómo poner videos aleatorios y ahí en un comentario te explico cómo ponerlos fuera del blog como estas imágenes.

    Saludos.

    ResponderEliminar
  12. Muchas gracias majo.Estare atento un abrazo y mil gracias

    ResponderEliminar
  13. Hola mojo no se si as publicau ya el tema de poner video como imagnenes flotates pero es que komo no lo encunetro entres tus paginas,....
    beno majo muchisimas gracias por todo

    ResponderEliminar
  14. Uhhh de hecho lo publiqué el mismo día que hiciste el último comentario.
    http://ciudadblogger.com/2010/01/mostrar-videos-al-azar.html

    Saludos.

    ResponderEliminar
  15. Q tal potro antes q nada GRACIAS x todas tus enseñanzas OOO t alabamos potro.. jaja

    Eres muy bueno y me gustaria que me dieras una opinion sobre mi blog porque lo siento muy sobrecargado de cosas y eso dificulta la visita de mis lectores.

    Me gustaria saber que es lo que mas tarda en cargarse en un blog; imagenes, videos, etc o que codigo puedo meterle a mi blog para hacerlo mas light.

    Xfa espero tu respuesta SALUDOS.!

    http://cocke69.blogspot.com/

    ResponderEliminar
  16. Hola cocke69,

    Gracias por tu confianza en mi opinión.
    La verdad es que no lo veo tan sobre cargado de gadgets, pero no estaría mal que reconsideraras dejar sólo lo que sea realmente necesario. Lo que sí es que podrías quitar uno de los dos contadores, tener dos no sirve de mucho.

    Saludos y gracias por tu comentario.

    ResponderEliminar
  17. Hola de nuevo

    Gracias por tomarte la molestia de pasar a mi blog se agradece y pues si tienes razón si tengo algunas cosas inecesarias pero solo lo hago para que se vea mas guapo el blog y atraiga lectores.

    Otra cosita aparte del codigo glider.js hay otro q tambien es un glider que se recorre automaticamente y no lo he podido encontrar y lo tiene la plantilla gamezine.

    Lo busque en tu sitio y no lo haye

    Espero y tengas la suerte de encontrarlo y hacer una entrada seria un buen aporte a tu magnifico sitio es un codigo muy chulo y mas de uno estaria agradecido.
    Yo se que tu puedes porque eres el MEJOR.

    De antemano MUCHAS GRACIAS y sigue así sorprendiendonos como siempre.!!

    SALUDOS..!!

    ResponderEliminar
  18. Hola de nuevo,

    Hay varios scripts que permiten crear los carruseles, así que me sería difícil atinar saber cuál es. De todas formas más adelante publicaré algunos scripts que permiten crear los carruseles de imágenes, quizá ahí podrás encontrar alguno que se adapte a tus necesidades.

    Saludos!

    ResponderEliminar
  19. Hola Potro.

    Tengo idea de meter un "gadget de imagen" e ir cambiando la imagen cada día o cada poco tiempo, entre unas decenas de ímágenes que tengo en "mis imágenes" en el ordenador.

    ¿Sería posible que se cargaran aleatoriamente desde esa carpeta cada vez que se entra al blog?

    ¿Hay alguna manera de cargar imágenes de forma aleatoria desde una carpeta del disco duro, en vez de desde una URL?

    Dime que sí,... anda!!

    Saludos.

    ResponderEliminar
  20. No, todo lo que se ve en Internet tiene que haber sido subido antes a Internet, no puede mostrarse algo que no se ha subido.

    Saludos.

    ResponderEliminar
  21. ...Me lo temía. Pero... las imágenes de la portada o de los gadget, sí se pueden subir desde el disco duro. Supongo que es para la función de "aleatoriedad" para lo que es preciso que tengan su URL.

    Bien, las subiré entonces a una página. En ese caso, ¿es posible que la imagen aleatoria no sea flotante, que sea la imagen de un gadget, por ejemplo (con su posición fija), pero aleatoria entre unas cuantas? Espero haberme explicado bien.

    Gracias otra vez, Potro. La verdad es que das un servicio alucinante, por la calidad, la disponibilidad y la rapidez de tus respuestas. Increible. Los bancos, las telefónicas... en fin,... todos "ellos" deberían tomar ejemplo :)

    Un saludete.

    ResponderEliminar
  22. Hay varias cosas que se pueden poner con imágenes al azar, el fondo del blog, banners, la cabecera, etc, depende qué quieras que sea al azar, pero como ves hay para escoger.

    Para subir las imágenes hay varios hostings, Google Sites, TinyPic, Imageshack, Dropbox, entre otro.

    Saludos y gracias por tus comentarios :)

    ResponderEliminar
  23. Gracias, Potro.
    Al final me he decidido por una imagen flotante aleatoria. Lo probé y, la verdad..., queda bien chingón.

    Hasta la próxima... que la habrá seguro, porque el que no sabe es como el que no ve, y el que sabe... Potro!!.

    ResponderEliminar
  24. Hola Potro, a mi también me gusta esta idea,como sería para poner la imagen a la izquierda? se puede?

    Saludos:)

    ResponderEliminar
  25. Hola Bencuom,

    Después de la URL de cada imagen verás que dice esto:
    style='position:fixed; bottom:0; right:0;

    Para ponerla a la izquierda sólo cambia donde dice right por left.

    Saludos.

    ResponderEliminar
  26. Gracias Potro:)ya te comentaré los resultados

    ResponderEliminar
  27. Al final me han quedado muy chulas las imagenes:)

    Ya puestos, te quería preguntar una cosa, porqué lo cierto es que no he encontrado ninguno.

    Sabes de algún editor de imágenes online, pero que quite el fondo de la foto? osea que quede transparente y se adapte a cualquier fondo de la plantilla?

    Gracias de nuevo:)

    ResponderEliminar
  28. Con este:
    http://www.pixlr.com/editor/

    ResponderEliminar
  29. oye man muchas gracias tu web me ha servido de mucha ayudad se te agradece sos un As

    ResponderEliminar
  30. No hay nada qué agradecer, me da gusto qué aquí hayas encontrado información útil :)

    ResponderEliminar
  31. Hola potro ke tal denuevopor aki saludos y agradecimiento por todo en lo que nos ayudas .De nuevo rrecurro a ti por una dudilla ,puse ese codigo en mi blog y pues solo quiseponer 2 imagenes y borre el codigo de la tercera imagen pero como marcaba error al guardar ,lo tube que dejar asi,ya despues puse las 2 imagenes y como eran muy grandes las queria reducir ,pero pues me marcaba de nuevo error al guardar y solo aparecia una imagen la primera la otra nunca me aparecio ,las tube ke kitar ,pero bueno espero que me puedas ayudar ,con esto a y otra duda¿Sera posible cambiar esas imagenes al lado izquierdo dela pantalla?
    Gracias potro saludos y si te gusta el anime , te invito a que lo veas en mi blog ,y me recomiendes.


    PD:Usa firefox porfavor si lo tienes porke se ve horrible el blog con explorer

    ResponderEliminar
  32. Claro, te dejo el código para que sean sólo dos imágenes y para que estén del lado izquierdo.

    <script language='JavaScript'>
    imagenes = new Array(2)

    imagenes[0] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>&quot;
    imagenes[1] = &quot;<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>&quot;

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

    </script>

    ResponderEliminar
  33. podria vincular las imagenes a alguna web o a mi propio blog para volver arriva dandole click encima??

    ResponderEliminar
  34. hola porto al igual que el comentario 38 quisiera saber:

    si se puede poner una imgane aleatoria pero con opcion de cerrar, la otra es una imagen aleatoria pero con alguna funcion como por ejemplo subir o para poner un link . esto ultimo lo he visto en este blog pero el autor no explica como: http://z-graphics.blogspot.com si te das cuanta la imagen aleatoria tiene la fucnion de subir.

    ResponderEliminar
  35. ivan, mil disculpas, no había visto tu pregunta; sólo encierra el código completo entre <a href="URL del enlace"> y </a>

    nEjO, mira esta entrada.

    ResponderEliminar
  36. Hola El Potro
    un progunta ¿mientras mas ponga mi blog se vuelve mas lento? jejej solo eso gracias

    ResponderEliminar
  37. Por supuesto, si tienes muchas cosas entonces el navegador tendrá que leer también muchas cosas para poder cargarlo, lo que hará que se haga más lenta la carga del blog. Es por eso que sólo hay que agregar lo que sea realmente necesario para evitar que el blog demore mucho en cargar.

    ResponderEliminar
  38. Una preguntilla, y como seria para que hubiese un bucle recorriendo una carpeta subida en internet?
    Queria hacer un gadget que pillara aleatoriamente jpgs de este enlace:
    http://wattplus.net/reunificacion/IMAGENES/sueldos/

    Gracias :D

    ResponderEliminar
  39. Te la voy a deber porque ahí sí no sabría decirte :/

    ResponderEliminar
  40. Potro yo encontré un código para poner la imagen en el lado izquierdo inferior pero atreves de un gaget html, lo malo es que solo puedo poner una imagen no se si se podrá poner dos imágenes para que se cambien cada ves que se actualice.

    No se si se podrá poner porque no me gusta meterme mucho al código del blog

    ResponderEliminar
  41. Siguiendo los pasos de esta entrada tendrás la imagen como la buscas, si es con otro método no sé, tendrías que preguntar en el blog donde has tomado el código.

    Igual puedes poner el código que se menciona en esta entrada dentro de un gadget y debería funcionar igual.

    Saludos.

    ResponderEliminar
  42. HOla amigo, muy buen aporte, me gustaría saber como ponerme un opción de "CERRAR" ya que yo lo utilizo con un banner de publicidad. Como para que el lector, cuando considere necesario pueda cerrar ese banner.

    Te dejo mi blog para que veas como quedó, pero necesitaria esa opcion: http//:www.fmcero.blogspot.com

    te agradecería me comentes en fmcero@gmail.com

    ResponderEliminar
  43. Hay una opción que es con cerrar pero la imagen no es al azar, siempre es la misma, no sé si te sirva:
    http://ciudadblogger.com/2010/01/imagen-flotante-con-opcion-de-cerrar.html

    ResponderEliminar
  44. potro holaa otra ves me pasa lo mismo que con el menu me sale detras de los post donde pongo el z-index:900??

    ResponderEliminar
  45. disculpa las molestias ya pude hacerlo U.U grax!!

    ResponderEliminar
  46. Hola Potro:
    Como puedo centrar las flechas como la tienes tu, en el centro de la pagina.
    Saludos

    ResponderEliminar
    Respuestas
    1. Ya ye he respondido en la otra entrada. Saludos.

      Eliminar
    2. Hola Potro:
      Estoy loco buscando la respuesta dime donde se encuentra.
      Saludos

      Eliminar
    3. Aquí mismo ;)
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Eliminar
  47. Hola Potro:
    O no entendí la pregunta o la respuesta la cuestión es que no la localizo la respuesta.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Al final de los comentarios de esa entrada está tanto la pregunta como la respuesta.
      Saludos.

      Eliminar
  48. Hola Potro:
    De nuevo te voy a formular la pregunta.
    Quiero poner la flechas arriba y abajo junta en el centro de la pagina como tu las tienes. Dime la pagina de respuesta y el numero Por favor.
    Saludos

    ResponderEliminar
    Respuestas
    1. Es en esa página que te mencioné:
      http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

      Sólo tienes que dar click en "Cargar más..." para ver todos los comentarios.
      Saludos.

      Eliminar
    2. Hola Potro:
      Ya lo tengo mira mi blog
      Saludos.

      Eliminar
    3. Vale, acabo de pasar a verlo :)

      Eliminar
  49. Buenísimo, El Potro, ahora voy a a usar este truco y dejaré a un lado por un tiempo el truco de imagen flotante con opción cerrar ^_^ Cambiar un poquito de vez en cuando viene bien, ¿no? ¡Saluditos desde Argentina!

    ResponderEliminar
  50. Hola tengo una duda y me gustaría si pudieras que me la solucionaras. En mi blog ,que puedes ver en al siguiente dirección trimusa.blogspot.com estoy realizando un catálogo de bisutería y me gustaría colocar una etiqueta de nuevo encima de las imágenes nuevas que vaya subiendo pero no se cómo realizarlo. Si sabes alguna manera de hacerlo podrías mandármelo por correo a trimusamep@gmail.com muchas gracias

    ResponderEliminar
    Respuestas
    1. No sabría decirte TRimuSa, nunca he hecho algo parecido a lo que pides.

      Eliminar
  51. Hola, quería saber si se puede agregar una dirección a la imagen. Es decir, si al hacer clic a la imagen te lleve a una entrada.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger