Con el sistema que se explica, cada vez que se accede a la página (o se refresca) el orden en que aparecen los elementos va cambiando. Probadlo con esta galería de iconos, refrescando (F5) esta página. Vereis como aunque la secuencia es la misma, cada vez se empieza de una imagen distinta.
El script es muy sencillo y lo único un poco más engorroso es rellenar la matriz que contiene las imágenes y sus enlaces. Para que todo funcione bien, sólo hay que tener cuidado en la redacción de estos.
<script type="text/javascript">
var indice = 0;
enlace = new Array();
enlace[0] = '<a href="URL_ENLACE0"><img src="URL_IMAGEN0"/></a>';
enlace[1] = '<a href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';
enlace[2] = '<a href="URL_ENLACE2"><img src="URL_IMAGEN2"/></a>';
indice = Math.random() * (enlace.length);
indice = Math.floor(indice);
for (i=1;i<=enlace.length;i++) {
if (indice == enlace.length) indice = 0;
document.write(enlace[indice]);
indice++;
}
</script>
var indice = 0;
enlace = new Array();
enlace[0] = '<a href="URL_ENLACE0"><img src="URL_IMAGEN0"/></a>';
enlace[1] = '<a href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';
enlace[2] = '<a href="URL_ENLACE2"><img src="URL_IMAGEN2"/></a>';
indice = Math.random() * (enlace.length);
indice = Math.floor(indice);
for (i=1;i<=enlace.length;i++) {
if (indice == enlace.length) indice = 0;
document.write(enlace[indice]);
indice++;
}
</script>
El ejemplo está hecho con tres pero se pueden insertar más imágenes simplemente añadiendo más elementos a la matriz, con el siguiente ordinal que toque. Dentro de cada elemento de la matriz (ENLACE[X]) se puede poner cualquier código HTML por lo que podrían contener una imagen sin enlace, un enlace de texto, un vídeo...
Una variante sería mostrar una cantidad limitada de elementos de entre todos los de la matriz. Para eso, en la siguiente línea
for (i=1;i<=enlace.length;i++) {
...habría que cambiar enlace.length por un número, siempre teniendo en cuenta que debe ser menor que el total de elementos que haya.
En el siguiente ejemplo sólo se muestran 4 imágenes cada vez, de entre las 12 que lleva la matriz y como se pretende, en cada carga se escogen cuatro distintas.
¿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...
Me parece una buena solución.
ResponderEliminarSaludos
¡Muy buena! Creo que la voy a usar para un par de enlaces en la sidebar^^
ResponderEliminarta bueno y es muy util y variado nice bro
ResponderEliminaroloblogger tengo una preguntita cuando utilizo el efecto de cambiar de imagen al pasar el cursor por encima de otra imagen queria saber si ese codigo o de alguna forma se pueda combinar con el codigo de imagenes desubicadas quisiera poner una imagen cambiante pero fuera de los post.
ResponderEliminarClaro. Colocas la imagen con POSITION o de la forma que estimes conveniente. Una vez que logres colocarla dónde quieres, le añades el efecto rollover.
ResponderEliminarhola, ¿como insertaste ese fondo en cada comentario que te dejan?.
ResponderEliminarSaludos.
Tienes que buscar la clase .comment-body y allí incorporar un background con imagen (o color plano)
ResponderEliminarbackground:url(URL_IMAGEN) #E3DFB0;
Oloman muchísimas gracias x la primicia de este post, es justo lo que buscaba. Un fuerte abrazo y feliz navidad!
ResponderEliminarDonde yo tengo el blog no existe la posibilidad de poner enlaces a entradas relacionadas. He pensado que podría poner el script en la plantilla (similar a una página web, con código html, divs y las variables a mostrar por ejemplo nombre del autor, título, artículo, comentarios...) para que mostrara enlaces a otros artículos en vez de imágenes (cambiando en el array las imágenes por los títulos de los artículos), pero ¿habría alguna forma de que seleccionara un array u otro en función de tags o de la categoría del artículo? En mi caso las categorías, lo que para tí son las etiquetas, se muestran en el artículo con <@EnlaceCategoriaNombre@> (El artículo final mostraría lo que en este artículo es Trucos, imágenes y scripts, debajo del artículo). La cuestión es que solo puedo modificar la plantilla general, no puedo añadir el script en cada artículo
ResponderEliminarHOla...
ResponderEliminarPaso a darte un gran besote y desearte a ti y los tuyos unas muy entrañables navidades y un estelar 2010..
Bellos sueños
No hay de qué KI. Un saludo y felices fiestas.
ResponderEliminar100x100net. Lo cierto es que en estos asuntos me pillas. Realmente no tengo la menor idea de cómo funciona Blogcindario, la Cocktelera o cualquier otro que no sea Blogger. Por probar, puedes intentar con este otro sistema que es más sencillo y sólo tiene enlaces de texto. Supongo que las referencias que se dan para Blogger, no serán válidas para tu plataforma, pero confío en que sabrás cómo manejarlas. Saludos.
Encantadora Balovega: ¡felices fiestas!
Ops, ok. Bueno, en realidad necesitaba saber si había alguna forma de que en función de una variable (y ahí me he enlazado a explicar un rollo, sorry) se puede elegir una matriz u otra. El resto creo que sí puedo adaptarlo yo :)
ResponderEliminarSiento de verdad no poderte ayudar más 100x100net.
ResponderEliminarhola oloman me podrias dar un ejemplo del codigo que usas en el icono para seguirte en twitter ?
ResponderEliminarun ejemplo del codigo ya que estado leiendo los post sobre rollover y imagenes desubicadas y no dice como combinar los dos.
gracias :)
Hola Oloman,
ResponderEliminarEstos días estoy diseñando una nueva plantilla para mi blog y he añadido una pestaña como enseñaste en tu blog ( pestaña vertical para usos múltiples ), con un enlace a mi RSS.
He estado actualizando el blog con mozilla firefox, y todo era como quería, pero luego he observado que hay ciertos problemas si para ver el blog utilizo Internet Explorer ( el fondo está mal distribuido y la pestaña está fuera de sitio ) o Google Chrome ( la pestaña tampoco está en su sitio )
¿ Cómo puedo hacer para que, tanto en Explorer, como en Firefox, como en Chrome, quede igual ?
Muchísimas gracias
Un saludo afectuoso antes de que acabe el año y te deseo felices fiestas y agradecerte, una vez mas,las veces que entro a consultar y me resuelves temas y dudas.
ResponderEliminarPau, el problema no está en el navegador, sino en la resolución de pantalla que utilices. Como fijaste el contenedor a 1045px a la izquierda, si la pantalla es más estrecha, el fondo se reajusta y la pestaña no. Esta sigue a 1045px.
ResponderEliminarPara colocarla en un lugar distinto a left:0px; tendrías que cambiar un poco la cosa.
Ya no sirve con poner en cualquier sitio el enlace y el DIV correspondiente. Lo tienes que poner dentro de otro DIV que esté por esa zona. Supongo que dentro del HEADER quedará bien.
Sea cual sea el que uses como contenedor del contenedor de la pestaña (no tengo más remedio que llamerles igual), le tienes que añadir un position:relative;
Por ejemplo #header {position:relative;}
Una vez hecho esto, verás que te manda la pestaña a 1045px a la izquierda pero con la referencia del HEADER, por lo que tienes que ajustar la posición de #contenedor, cambiando los valores de TOP y LEFT.
A partir de que hagas esos cambios, si cambia la posición de la cabecera, también cambiará la posición de la pestaña.
Gracias Anna. Felicidades a tí también.
ResponderEliminarPasaba a desearte Felices Fiestas y un maravilloso 2010, tan maravilloso o más que este año que ya termina :D
ResponderEliminarmuchas gracias
ResponderEliminarNo se que hago mal, pero a mi no me funciona el codigo. Entiendo que donde pone URL_ENLACE0 es la url de la pagina donde ira al pinchar la imagen, y donde pone URL_IMAGEN0 la url de picasa donde esta la imagen en cuestion ¿cierto?
ResponderEliminarGem@, Feliz Navidad y que te crezca la boca un palmo :D
ResponderEliminarMercier, espero que te salga.
Watanabe, necesitaría saber dónde intentas ponerlo y qué fallo te da concretamente.
jajajaja hacía tiempo que no oía (leía) esa expresión :)
ResponderEliminarEso debe ser porque te comunicas poco con gente de por aquí ;D
ResponderEliminarHola Oloman, soy nuevo por aquí, pero me ha gustado mucho la ayuda que ofreces. Siento aprovechar la ocasión para preguntar, pero necesito solucionar una duda. Estoy tratando de implementar el orden aleatorio, pero necesito conbinarlo con un efecto deslizante tipo "marquee", y no lo consigo. ¿puedes aconsejarme? gracias.
ResponderEliminarParpix, necesitaría saber qué es lo que quieres mostrar con orden aleatorio para ver si se le puede aplicar después el MARQUEE.
ResponderEliminarGracias, ya lo he solucionado. Quería mostrar enlaces. Utilicé el código que enseñas y después lo introduje entre la función MARQUEE, pero no me funcionaba porque estaba escribiendo algo mal. Ahora queda fantástico porque añado enlaces con banner incluido que van deslizándose de forma vertical en un cuadro de 200px. Gracias
ResponderEliminarMuy bueno. Lo he visto y efectivamente funciona.
ResponderEliminarhola oloman,
ResponderEliminarhe estado intentado hacer esto, y me da un problema con el tamaño de la foto, yo introduzco todas las fotos en la matriz pero claro las fotos son tan grandes que no quedan como las tuyas sino que ocupan todo el espacio de entrada..
la cosa es que he intentado hacerlo a mano, es decir, en vez de HTML lo e puesto en Redactar, y claro hay no salen las fotos..
no se q hacer, no te puedo dejar el enlace del blog ya que es un blog privado a ver si me lo puedes solucionar..
Gracias de antemano!
ahora para colmo ni salen las fotos.. =S
ResponderEliminarHola Jorge V. En los elementos de la matriz, se pueden incluir estilos. Ahí podrías limitar el ancho de las imágenes. Te lo marco en uno de ellos en mayúsculas-negrita.
ResponderEliminarenlace[0] = '<a href="URL_ENLACE0"><img src="URL_IMAGEN0" STYLE="WIDTH:400PX;"/></a>';
Gracias! voy a ello!
ResponderEliminarMe sigue sin salir =S =S
ResponderEliminarPuede ser porque tengo 19 fotos??
=S =S
la pagina sigue el mismo estilo que la tuya, es decir con leer mas.. y el ancho de la entrada es un pelin mas estrecho pero apenas es notorio..
si me dejas un correo te invito para que veas "el por que"
El correo está en el pie del blog.
ResponderEliminarya te invite, la entrada se llama bendicion...
ResponderEliminarJorge V. no veo por ningún sitio que hayas incluido el ancho de las imágenes, pero de todas formas tampoco te funciona el sistemas aleatorio.
ResponderEliminarEl caso es que si pretendes poner el codigo que propongo en un post, tendrás que teclearlo todo seguido para que funcione. O lo que es lo mismo, quitarle todos los saltos de línea. Son cosas de Blogger.
<script type="text/javascript">var indice = 0;enlace = new Array();enlace[0] = '<a href="URL_ENLACE0"... etc.
oks voy al lio
ResponderEliminarHola, me parece muy interesante tu blog y te animo a seguir en esta línea de ayuda, sin embargo con el truco de las imágenes aleatorias como que me es imposible ponerlo en un post. Incluso quitándole todos los saltos de línea no hay manera "Su HTML no es aceptable: Tag is broken: A" Puedes escribirlo y te lo copio.
ResponderEliminarGracias
Hola.
ResponderEliminarSeguro que te faltó algo por copiar o redactar. Este es el código para un post, con dos imágenes. Copia, pega y si te funciona, ya sólo tienes que sustituir las imágenes por las tuyas y añadir las que necesites.
<div align="center"><script type="text/javascript">var indice = 0;var final = 0;enlace = new Array();enlace[0] = '<img style="cursor:pointer; cursor:hand;width: 125px; height: 125px;" src="http://1.bp.blogspot.com/_0eC4K-qZ7AM/SxxVg40bxzI/AAAAAAAAK1s/TNzXnVmIdAo/s200/Untitled+13.jpg" border="0" alt=""/></a>';enlace[1] = '<img style="cursor:pointer; cursor:hand;width: 125px; height: 125px;" src="http://4.bp.blogspot.com/_0eC4K-qZ7AM/SxxVgkELEVI/AAAAAAAAK1k/PETgZ7Znp0M/s200/Untitled+7.jpg" border="0" alt=""/></a>'; indice = Math.random() * (enlace.length);indice = Math.floor(indice);for (i=1;i<=enlace.length;i++) {if (indice == enlace.length) indice = 0; document.write(enlace[indice]); indice++;}</script></div>
Hola, problema resuelto, MUCHAS GRACIAS, el caso es que el código para dos imágenes tampoco me funcionaba, me decía: Su HTML no es aceptable: Tag is broken: IMG.... Lo que hice fue activar el Dejar de mostrar los errores HTML del cuerpo de esta entrada y voila por arte de magia si lo pude publicar.
ResponderEliminarGracias de nuevo y perdona las molestias
Claro que no te funcionó. Acabo de darme cuenta de que me dejé dos </a> por ahí que no deberían estar. Quita esos dos tags y restaura lo de los errores.
ResponderEliminarHola, gracias por el script.
ResponderEliminarTengo unas dudas, si hay alguna forma de que las imágenes tengan una pequeña separación entre ellas y no estén pegadas, y como se puede controlar la cantidad de columnas y filas que aparecen.
Arkano, para insertar cualquier otra cosa, sólo tienes que añadir un document.write con el contenido que quieras, detrás de la línea document.write(enlace[indice]);
ResponderEliminarPor ejemplo, para un espacio en blanco, sería:
document.write(' ');
y para un salto de línea
document.write("
");
Sobre la cantidad de columnas y filas, lo más fácil es cambiar el tamaño de las imágenes para adaptarlo al ancho diponible. Si por ejemplo tienes 500px, para mostrar tres por fila, cada una debería tener entre 126px y 167px.
Redimensionarlas complicaría bastante este código.
Hola gracias! Tengo una duda, y si lo que se quisiera es una galeria en CSS?
ResponderEliminarPor ejemplo tengo una galeria en CSS con diversas tablas escritas en css las cuales son
Como podria rotar esos div?
Con CSS desconozco si se puede hacer de forma aleatoria, pero casi que apostaría a que no. Si lo que quieres es mostrar esas galerías dentro de una misma capa, en lugar de todo desplegado como se ve aquí, puede que te interese esto otro: Rotar botones o banners de manera aleatoria
EliminarYa instale el código, pero las imágenes quedan pegadas y yo las quiero más despegadas para se puedan diferenciar las imágenes. Y no sé si también se le puede colocar un borde, así como están en el ejemplo. Gracias por todo.
ResponderEliminarasi queda http://mundxpres.blogspot.com
EliminarYa vi que te apañaste con el hspace y el vspace. Pues de la misma forma puedes añadir un borde a la imagen: añadiéndolo como código a cada registro.
EliminarME SIRVIÓ DE MUCHO PERO LO ÚNICO MALO ES QUE SI NO SE HAN DADO CUENTA LA FORMA ALEATORIA SIEMPRE SE PEGAN DE A DOS IMÁGENES ES DECIR SON ALEATORIOS PERO EN PAR
ResponderEliminar