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:
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.
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>
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?
¡Eres un crack! Ahora si que si. ¡Ole! Gracias tío.
ResponderSuprimirExelente!!!!!
ResponderSuprimirAmigo te sigo desde hace tiempo y estas enlazado en mi blgo y por ello paso a desearte un feliz fin de semana..
ResponderSuprimirGracias por todas la ayuda que nos dan.. un abrazo
Feliz fin de semana, Balovega y ¡Feliz Navidad! a tí y a todos los lectores, visitantes accidentales, simpatizantes, etc.
ResponderSuprimirGracias amigo por las respuestas.
ResponderSuprimirAhora si lo que lo haré en el mi blog
lo usaré, de estoy seguro
gracias
feliz navidad y feliz año!!!
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.
ResponderSuprimirGracias,
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.
ResponderSuprimirLo 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.
COMO HAGO PARA PONER EL COSO ESE "SUSCRIBIR TEMAAS" Y TODAS ESAS PALABRITAS KE GIRAN AL ARRIBA?
ResponderSuprimirY DONDE PONDRIA LOS CODIGOS KE PASAS?
POR FAAVOR RESPONE
MANDAME UN E-MAIL A MI MSN
mordiscoo.-@hotmail.com
Mikiithaa, las instrucciones para el "coso" que gira las tienes en la siguiente dirección:
ResponderSuprimirhttp://oloblogger.blogspot.com/2008/09/nube-de-etiquetas-3d-blogumus.html
Perdon Oloman por hacerte la otra pregunta anterior con este pos que no lo había visto, me lo respondiste. Gracias por tu ayuda !!
ResponderSuprimirJe, je... ¡y yo te acabo de contestar en el otro porque este lo he visto después!
ResponderSuprimirHola de vuelta, yo. Cada ves que entro ha este blog, me encuentro con cosas interesantes.
ResponderSuprimirEsta 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 !!
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.
ResponderSuprimirHola Oloman. Justo tengo la misma duda del anónimo del comentario numero 6. Sabes ya, ¿Cómo hacerlo en ese caso?
ResponderSuprimirEspero tu respuesta :=)
Un abrazo y éxitos
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.
ResponderSuprimirSi 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.
Gracias por la ayuda.
ResponderSuprimirAmigo, muy buena la entradas, me ha servido muchisimo, de verdad, MUCHAS GRACIAS.
ResponderSuprimirBendiciones!.
fabuloso funciona perfecto gracias..
ResponderSuprimirsolo una pregunta como hago para mostrar 10 imagenes aleatorias a la vez de una carpeta de 100?
Para 100 te va a resultar muy laborioso, pero lo tienes explicado en esta otra entrada. Saludos.
ResponderSuprimirTe 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
ResponderSuprimirVale. Me quedaré con la versión colombiana de la expresión, porque la española no es muy buena que digamos :D
ResponderSuprimirSaludos
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.
ResponderSuprimirNo hay de qué. Para mí es un hobby. ;)
ResponderSuprimirgracias oloman :D
ResponderSuprimirMuchas gracias, muy bueno este truco :D:D:D
ResponderSuprimirEstoy actualizando la web y lo hago mientras en un blog de pruebas: http://malagarec.blogspot.com/
ResponderSuprimirEl 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?
Gracias! estaba buscando la respuesta! GRACIAS POR ILUMINARME!
ResponderSuprimirTuniti, 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.
ResponderSuprimirPrueba el mismo código pero cambiando las comillas simples (') por ' y las comillas dobles(") por comillas simples (').
Acabo de probarlo y sigue apareciendo en blanco. Gracias de todas formas.
ResponderSuprimirUn verdadero Crak, sí señor. Pero, ¿puedes rizar el rizo?
ResponderSuprimir¿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.
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:
ResponderSuprimirenlace[0] = '<a target="_blank" href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';