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 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...
¡Eres un crack! Ahora si que si. ¡Ole! Gracias tío.
ResponderEliminarExelente!!!!!
ResponderEliminarAmigo te sigo desde hace tiempo y estas enlazado en mi blgo y por ello paso a desearte un feliz fin de semana..
ResponderEliminarGracias 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.
ResponderEliminarGracias amigo por las respuestas.
ResponderEliminarAhora 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.
ResponderEliminarGracias,
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.
ResponderEliminarLo 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?
ResponderEliminarY 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:
ResponderEliminarhttp://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 !!
ResponderEliminarJe, je... ¡y yo te acabo de contestar en el otro porque este lo he visto después!
ResponderEliminarHola de vuelta, yo. Cada ves que entro ha este blog, me encuentro con cosas interesantes.
ResponderEliminarEsta 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.
ResponderEliminarHola Oloman. Justo tengo la misma duda del anónimo del comentario numero 6. Sabes ya, ¿Cómo hacerlo en ese caso?
ResponderEliminarEspero 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.
ResponderEliminarSi 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.
ResponderEliminarAmigo, muy buena la entradas, me ha servido muchisimo, de verdad, MUCHAS GRACIAS.
ResponderEliminarBendiciones!.
fabuloso funciona perfecto gracias..
ResponderEliminarsolo 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.
ResponderEliminarTe 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
ResponderEliminarVale. Me quedaré con la versión colombiana de la expresión, porque la española no es muy buena que digamos :D
ResponderEliminarSaludos
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.
ResponderEliminarNo hay de qué. Para mí es un hobby. ;)
ResponderEliminargracias oloman :D
ResponderEliminarMuchas gracias, muy bueno este truco :D:D:D
ResponderEliminarEstoy actualizando la web y lo hago mientras en un blog de pruebas: http://malagarec.blogspot.com/
ResponderEliminarEl 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!
ResponderEliminarTuniti, 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.
ResponderEliminarPrueba 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.
ResponderEliminarUn verdadero Crak, sí señor. Pero, ¿puedes rizar el rizo?
ResponderEliminar¿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:
ResponderEliminarenlace[0] = '<a target="_blank" href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';
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?
ResponderEliminarEl 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"/
ResponderEliminarPorq 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?
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.
EliminarAsí que URL_ENLACE1 representa la dirección de destino y URL_IMAGEN1 la dirección de la imagen a mostrar.
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?
EliminarDe 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.
EliminarMuchas gracias, me sirvio perfectamante.
ResponderEliminarUn saludo
muy bueno justo lo que buscaba saludos :I
ResponderEliminarHola, 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í?
ResponderEliminarMuchas gracias
Hola. Por lo que he visto debe ser "eso" que te sale justo encima de la cabecera.
EliminarDe 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.
Gracias Oloman,
ResponderEliminarsegú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.
Listo Oloman,
ResponderEliminarcambié 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
Pues... ¡de nada! :)
EliminarHola Oloman,
ResponderEliminarestoy 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
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.
EliminarCasi. casi te capisco Oloman,
ResponderEliminarLa 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.
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.
EliminarLo 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.
Gracias Oloman,
ResponderEliminarentendido y anotado.
feliz fin de semana
Sor
Otra vez Oloman,
ResponderEliminarno 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
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.
EliminarOloman, 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.
ResponderEliminarPrueba a ajustar este código añandiéndole CDATA según se explica en la segunda opción de este otro post.
EliminarGracias 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
EliminarSaludos.
Varios caminos llevan a Roma, pero si te fijas, ese código lleva lo que te dije: //<![CDATA[
ResponderEliminarSOS UN MAESTRO!!!! No sabés cómo estaba buscando esto...
ResponderEliminarGRACIAS!!!!
Veo que aquí puedo tener solución a un montón de inquietudes.
GRACIAS DE NUEVO!!!
Muy buen aporte , se agradece :D
ResponderEliminarHola se que llego muy pero muy pero muuuy tarde, aun asi quiero agradecerte, sos un genio!
ResponderEliminarNunca es tarde para recibir un piropo ;)
EliminarGracias
Hola tengo una pregunta algo compleja. Este código es para imágenes aleatorias en un solo lugar, mi pregunta es. Cómo sería uno que haga que se carguen por ejemplo 2 imágenes a la vez en dos partes diferentes de la web. Es decir que sigan siendo random pero que cada vez que cargues la web salga un grupo de imágenes como 1,2,3,4 en distintas areas y luego que al recargar salgan 5,6,7,8. Como las imágenes están en distintas areas creo que tendría que el sitio tener un código en cada area independiente que responda a un código que llame a cada imagen para que sea la que se vea
ResponderEliminarhola gracias por el codigo, mi pregunta es y si kiero mostrarlo dentro de un div
ResponderEliminar