Rotar botones o banners de forma aleatoria | Oloblogger Esta es una manera de ir mostrando en el mismo espacio, una serie de imágenes con enlace, que se van viendo siguiendo una serie predetermina...

8 de diciembre de 2009

Rotar botones o banners de forma aleatoria

Esta es una manera de ir mostrando en el mismo espacio, una serie de imágenes con enlace, que se van viendo siguiendo una serie predeterminada, pero empezando cada vez que se accede a la página por una distinta. Los siguientes botones son un ejemplo y si refrescais podeis ver que la secuencia empieza cada vez por uno distinto.


Esto puede servir para mostrar una lista de enlaces de cualquier tipo, sin ocupar tanto espacio como en una lista normal y sin darle prioridad a ninguno de ellos: un blogroll, diversos banners publicitarios, unos botones o simplemente una galería de imágenes.

Es sistema está basado totalmente en el siguiente script:

<script type="text/javascript">
var ban = new Array();
var enl = new Array();
var indice = 0;

ban[0] = new Image();
ban[0].src = "URL_IMAGEN_0";
enl[0] = "URL_ENLACE_0";

ban[1] = new Image();
ban[1].src = "URL_IMAGEN_1";
enl[1] = "URL_ENLACE_1";

ban[2] = new Image();
ban[2].src = "URL_IMAGEN_2";
enl[2] = "URL_IMAGEN_2";

indice = Math.random() * (ban.length);
indice = Math.floor(indice);

function rota()
{if (indice == ban.length) indice = 0;
if (document.images) {
document.images.rotando.src = ban[indice].src;
}
else {
document.getElementById('rotando').src=ban[indice].src;
}
indice++;
setTimeout('rota()',2000);
}
function vete() {window.open(enl[indice-1]);}
</script>

<img id="rotando" style="cursor:pointer;" src="" onclick="vete();"/>
<script type="text/javascript">rota();</script>

El valor 2000 es el tiempo en milisegundos (2 segundos) que se espera antes de mostrar el siguiente botón. Podeis modificar ese valor por el que más os convenga.

Las imágenes y enlaces que se quieren colocar, tienen que ir en la matriz BAN y en la llamada ENL. Cada grupo de tres líneas representan una imagen y su enlace respectivo. En un principio, este código está preparado para 3 imágenes/enlaces. Si se quieren añadir más, simplemente hay que insertar más líneas con la misma estructura:

...
ban[2] = new Image();
ban[2].src = "URL_IMAGEN_2";
enl[2] = "URL_IMAGEN_2";

ban[3] = new Image();
ban[3].src = "URL_IMAGEN_3";
enl[3] = "URL_IMAGEN_3";

ban[4] = new Image();
ban[4].src = "URL_IMAGEN_4";
enl[4] = "URL_IMAGEN_4";

indice = Math.random() * (ban.length);
indice = Math.floor(indice);
...


Si por casualidad lo de que las imágenes se muestren de forma aleatoria no os conviene, entonces simplemente eliminar del script las dos últimas líneas que se ven en el último trozo de código que os hemos puesto; las que asignan valores a la variable INDICE.

Lo que aquí se reproduce está preparado para copiar en un gadget tipo HTML/JavaScript.

¿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

34 comentarios :

  1. Interesante, es cierto que esos botones ocupan un gran espacio en el blog.
    Saludos

    ResponderEliminar
  2. Joselop44, se puede aplicar para esos botones o para cualquier otro tipo de imágenes y/o enlaces

    ResponderEliminar
  3. Hola! ueria preguntarte sobre una propiedad que tienes en el blog. resulta que copiando los codigos para los scripts que tienes puestos, al pegarlo en algun documento, etc... se pega automaticamente despues una frase que pone:

    Leer más: http://oloblogger.blogspot.com
    Under Creative Commons License: Attribution Non-Commercial Share Alike

    resulta que esa propiedad me ha gustado mucho, porque tengo un blog donde colgamos a menudo traducciones y tal, y muchas veces vemos como nuestras traducciones estan subidas sin acreditar. sé que es algo que no garantiza 100% que nos acrediten, pero por lo menos, si pillamos a algun despistado, eso que nos podemos llevar.

    ¿podrias explicar como poner ese codigo?

    ResponderEliminar
  4. Estoy en ello Melody. Acabo de instalar el servicio hace pocas horas. En cuanto lo controle, lo explico.

    De todas formas, lo que puede ser una ventaja para otros, es un inconveniente para este blog, porque eso de que meta código extra puede confundir a la gente. Ya veremos...

    ResponderEliminar
  5. Amigo Oloman,

    Tiene Vd. un blog que es una maravilla. Yo lo descubrí por casualidad hace una semana y la verdad es que he aprendido un montón de cosas que desconocía. Ente otras, he conseguido poner una flecha en mi blog que apunta al principio. He estado mirándome con mucha atención las instrucciones que nos da para ir rápidamente a un punto de la página y no lo he conseguido. En concreto me interesaría que me indicase cuáles son los códigos y en qué lugar de la plantilla se pegan para redireccionar a:

    BLOGS QUE SIGO
    y
    IR AL PRINCIPIO.

    La verdad es que pone Vd. de forma generosa y muy instructiva al alcance de todos los internautas una herramienta de la que muchos nos beneficiamos. Es una gozada entrar en este espacio.

    Le estaré muy agradecido si le robo un poco de su tiempo y me contesta, si quiere, aquí mismo, a la pregunta que le he hecho, pues este espacio lo visito cada día para aprender y siempre aprendo cosas nuevas.

    Como puede comprobar, ya he puesto un enlace muy bonito a su blog en mi columna lateral, con los códigos que Vd. tan generosamente nos ha facilitado.

    Reciba toda mi consideración y un caluroso saludo,

    Antonio Martín Ortiz

    ResponderEliminar
  6. Antonio, escribes tan correcto que me acojonas. Perdona la familiaridad y la broma pero es que uno no está acostumbrado a que en este medio le escriban así y mucho menos tratándole de usted. Si no te molesta, yo no lo haré y te agradecería que tú tampoco lo hicieras. Me refiero a lo del tratamiento. En cuanto a la forma de expresarte puedes seguir usando la que mejor te parezca.

    Sobre tu pregunta, en este enlace seguramente puedes encontrar lo que necesitas. Ahí se explicaba el uso de marcadores para acceder a cualquier parte de la página. Lo de "ir al principio" es lo que ya tienes con la flecha, salvo que te refieras a otra cosa.

    Un saludo.

    ResponderEliminar

  7. Amigo Oloman,

    Ya veo que tú eres un tío cojonudo y te trataré en consecuencia. No te acojones de que yo escriba bien, porque ésta es mi profesión, de la misma forma que tú eres un hacha en el dominio de la Informática y todo el lío ése de los códigos HTML.

    He puesto la flecha hacia arriba, porque, en el enlace que me citas, que yo ya había leído, das el código exacto que hay que poner y dónde ponerlo.

    Yo ahora lo que necesito es poner una flecha hacia arriba para que me remita al principio del blog, usando esta imagen:

    http://tarjetauba.com.ar/images/arrow_down.png

    con el texto

    IR AL PRINCIPIO

    Creo que para ti será fácil darme el código entero y decirme en qué parte de la plantilla lo pongo. Yo lo quisiera en la parte derecha, encima del la flecha que ya hay, o en la parte superior de la página.
    También me gustaría poner una marca para moverme rápidamente a los

    BLOGS QUE SIGO

    porque los pienso poner al final de la columna lateral, para que estén visibles los otros elementos. Si pongo eso al principio de la columna lateral, se tarda demasiado en llegar a los otros enlaces.

    Pues eso, como veo que eres tan dispuesto y tan experto, te pido que, cuando tengas un momentillo, me envíes el código correspondiente y me digas dónde lo pongo.

    Tu página sobre estos temas me la he leído un montón de veces, pero, como puedes comprobar, soy un primerizo en estos temas que tú tan ampliamente dominas, y, la verdad, no consigo aclararme del todo.

    Bueno, vamos a ver qué pasa.

    Te saludo, más cordialmente, diciéndote:

    Hasta pronto, tío.

    Antonio

    ResponderEliminar

  8. Bueno, amigo Oloman,

    En el mensaje anterior escribí:

    IR AL PRINCIPIO

    pero quería decir:

    IR AL FINAL

    Hasta luego.

    Gracias, tío.

    Antonio

    ResponderEliminar
  9. Me da la impresión de que no hablamos del mismo enlace. Una cosa es el Ir Arriba y otra distinta son los Marcadores. Tu tienes lo primero y te proponía que intentaras hacer lo que tú quieres con lo segundo.

    En el enlace se explica todo con más detalle del que podría desarrollar aquí.

    Para el Ir Abajo/Final (que no para el "Blogs que sigo"), se puede aprovechar el mismo código de Ir Arriba. Tendrías que sustituir la imagen por la nueva que citas y cambiar también el enlace "#" por "#footer-wrapper". Por último, tendrías que ajustar las distancias respecto a la parte de abajo (bottom) y a la de la izquierda (left), para que no saliera encima de la otra flecha.

    Espero te sirva.

    ResponderEliminar
  10. Amigo Oloman,

    Eres un tío excepcional, de lo más cojonudo que existe o pueda existir. Te dejo aquí el comentario que te he inscrito en LA BLOGOTECA, que se explica por sí mismo. Igualmente te digo que yo domino bien el arte de escribir en Castellano, en Latín y en Griego Antiguo. Si un día necesitas que le eche un vistazo a algún escrito serio y perfecto que tengas que redactar, aquí estoy yo para darle el último toque. Sería todo un placer y una forma de agradecerte todo lo que me has enseñado. Recibe un cordial saludo.

    El Blog de Oloman es una maravilla, como no he visto ninguna otra antes en el mundo de la blogsfera. Tiene Oloman unos conocimientos informáticos que no pueden ser superados por nadie. Además, tiene una cualidad que no suele abundar: le formulas una pregunta y, en cuestión de horas, ya tienes la contestación en el ordenador. Y todo ello de una forma totalmente desinteresada y gratuita, lo que tiene mucho mérito en este mundo nuestro en el que te lo cobran todo: ya tenemos que pagar el agua. Dentro de poco tendremos que pagar el aire y, más adelante, pagar también porque nos saluden por la calle. Sólo quedará una cosa que será gratis en este mundo nuestro: las preguntas de Informática al amigo Oloman.

    Además, tiene una forma de explicar las cosas tan pedagógica, que las entiende hasta el más profano en conocimientos informáticos.

    Yo he llenado mi blog de artilugios muy bonitos, gracias todo ello a Oloman. Es que el Sr. Oloman es todo un caballero. Desde aquí le envío un afectuoso saludo y todo mi agradecimiento, y os aconsejo que visitéis su blog. Quedaréis maravillados.

    Antonio Martín Ortiz

    ResponderEliminar
  11. Antonio, ¡Se me han saltado las lágrimas! :D

    Sólo tengo un pero: mis conocimientos informáticos son muy limitados y la comparación es lo único que hace parecer lo contrario.

    Muchas gracias.

    Nota: Quedaría más mono que las dos flechas tuvieran el mismo estilo.

    ResponderEliminar
  12. Llego a tu blog desde el de Antonio (como ves, no tendrás ninguna dificultad en hablar con él, porque es un pedazo de ser humano, además de muuuy inteligente... aunque, como yo, necesita mucha ayuda para "ordenar" su blog) y he quedado sorprendida de tu generosidad al compartir con nosotros tantos conocimientos informáticos... y tan claritos.

    Te enlazo, desde luego, y me "aprovecharé" de tus entradas para solucionar "entuertos" en mi pequeño espacio.

    ¡Ah!, me voy a la blogoteca.

    Un besazo.

    S.

    ResponderEliminar
  13. Bienvenida por mi barrio Soledad. Nos leemos.

    ResponderEliminar
  14. Hola holaaa! bueno ya soy fan declarada de tu blog, te sigo y cada vez que actualizas entro, porque aprendo siempre algo :D

    ultimamente me trae loca una cosa que no encuentro en todo internet y creo que tampoco en tu blog; el gadget para las "entradas más comentadas"
    estaré pendiente de tu respuesta, gracias!!!

    ResponderEliminar
  15. Pues no Luzzia*, no lo tengoen el blog. El caso es que pensaba que sí porque lo implanté hace tiempo en otro blog, aunque posteriormente lo quité por aligerar. Publicaremos algo al respecto...

    ResponderEliminar
  16. Amigo Oloman,

    No te quites méritos, que tú de informática sabes un huevo, o dos. Seguiré aprendiendo de ti. Por lo que se refiere a las flechas de mi blog, tengo que decirte que a mí me gustan así. ¿Qué le vamos a hacer? Sobre gustos no se puede opinar.

    Ya que Soledad Sánchez M. ha hablado tan bien de mí, te aseguro yo que ella es una poetisa de las mejores. ¡Ella sí que escribe bien!. Es una maravilla. Entra en su blog y podrás gozar de las mejores poesías, auténticos poemas del mejor estilo. Yo no he visto a nadie que escriba tan bien como ella. Y como persona, también es una maravilla. De verdad.

    Un cordial saludo,

    Antonio

    ResponderEliminar
  17. Ok. Si te gustan así no hay problema. Cada uno decora su casa como quiere.

    ResponderEliminar
  18. Hola de nuevo, Oloman!

    he visto que has quitado la propiedad del meta código que te comenté que me interesaba, el de que al copiar un texto del blog, se pegaba automáticamente un texto adicional. Por favor, ¿podrías decirme como poder incluirlo, o las ventajas/desventajas que le has visto? yo desde que lo vi me quedé bastante asombrada porque sería una solución para mi blog, porque eso de bloquear el botón derecho del ratón no me gusta, y preferiría colocar ese código infiltrado en mis traducciones y comunicados.

    un saludo, y espero no ser molestia ;)

    ResponderEliminar
  19. No eres molestia Melody. Realmente no lo he quitado, sino que lo he puesto en otro blog.

    Aquí molestaba cuando copiabas código, tal y como tú me avisaste. Allí sigo probando, porque no entiendo todo bien y me gustaría explicarlo adecuadamente.

    ResponderEliminar
  20. Estimados tengo una seria duda, me parece muy bueno este script y lo estoy usando pero me gustaria modificar algo y no se como

    Cuando aprieto en el banner me abre en una nueva ventana, y a mi me gustaria que se abriera en la ventana que actualmente se esta usando para navegar en mi web

    como podria modificar esto ?

    ResponderEliminar
  21. Hola Scott Nash. Menos mal que de vez en cuando me preguntais cosas fáciles :D

    Para abrir los enlaces en la misma página, tendrías que cambiar la funcion VETE de manera que se quedara así:
    function vete(){window.open(enl[indice-1],'_self');}

    Un saludo

    ResponderEliminar
  22. Funciono perfecto muchas gracias por la ayuda y me gustan mucho los script por que vienen a remplazar cosas que antes haciamos con el flash y con un script hace mas ligera la carga de la pagina y la satura menos

    ResponderEliminar
  23. Bueno, cada cual tiene sus ventajas e incovenientes... como casi todo. Saludos.

    ResponderEliminar
  24. Anónimo13/8/10 7:21

    ¡Ayuda por favor! El código que has porporcionado es fantástico, pero se me presentó un problema. Al colocarlo en varios lugares de mi web, solamente funciona en uno. Es decir, creo una tabla, coloco el código y en la siguiente hago lo mismo. Pero cuando examino el resultado en Firefox, solo aparecen las imágenes en una rotando y en el otro no aparece ni la primera imagen. Y si lo examino en Internet Explorer, aparecen las imágenes en ambos espacios, pero solo en uno rota. Por favor necesito una solución urgente.

    ResponderEliminar
  25. Anónimo, no puedes usar (exactamente) el mismo código en diversas partes de la página.

    Si quieres repetir las mismas imágenes/enlaces, en la segunda y posteriores ocasiones sólo tendrás que incluir las tres últimas líneas.

    Si se trata de distintas imágenes/enlaces, entonces tendrás que repetir todo el código, pero cambiando el nombre de los arrays:
    ban
    enl
    indice

    ResponderEliminar
  26. Anónimo25/8/10 5:51

    Muchas gracias, esta página es de lujo!!!

    ResponderEliminar
  27. Muchas gracias por colocar este código tan útil. La verdad que venía buscando un código para banner desde hace días para mis blogs. De verdad muchas gracias muy útil la verdad.

    ResponderEliminar
  28. perdon donde comento,pero me gustaria saber como bloquear el boton derecho del mouse , para evitr q salga el menu flash, por ejemplo yo uso un widget flash, y al hacerle clik con el boton derecho le da la opcion al usuario de modificar laimagen, como puedo evitarlo?

    ResponderEliminar
  29. Dj's Club, publicado hoy un post sobre tu pregunta ;)

    ResponderEliminar
  30. Gracias! funciona perfectamente!! es el unico que me ha funcionado en mi web y he probado varios...

    ResponderEliminar
  31. Gracias a tí por hacérmelo saber Beto

    ResponderEliminar
  32. buenas tardes amigo tu metodo de banners rotativos me sirvio de mucho... como recompensa a tu maravillosa ayuda dejame darte un truco para que conmsigas todos los likes, google+1, y seguidores en twiter totalmente gratis... y si no es poco conseguiras trafico del todo el mundo gratis... la cantidad depende de ti comunicate con migo en wjvp2012@hotmail.com y te paso el dato no es un truco... saludos

    ResponderEliminar
  33. aqui te dejo el link de uno de los metodos gratis de lo que te hable anteriormente saludos http://addm.co/?DPCO03J

    ResponderEliminar