Hacker of the Web
Tus ideas en código!...y mas

Menu de imágenes aleatorias

Ya habíamos publicado una especie de post donde explicaba como colocar un enlace aleatorio, en esta ocasión será ahora una imagen con enlace la que aparecerá aleatoriamente, podría ser de cualquier tema o tamaño.



/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



Este efecto se logra mediante algoritmos en javascript. Bien, con esas imágenes aleatorias podemos colocarle algún enlace referenciando a la fuente de la imagen o hacia un lugar de la propia página y así tener una especie de menú:



Podría colocarse una como en el ejemplo anterior o podemos agregar dos imagenes aleatorias, es aconsejable no colocar las mismas imágenes en los dos bloques pues podría salir la misma imagen:


La utilización es simple, necesitamos definir únicamente las ubicaciones url o direcciones web de nuestras imagenes y sus respectivos enlaces. Pero primero colocaremos en antes de </head> en Edicion HTML, sin expandir las plantillas de artilugios las siguientes funciones:
<script type="text/javascript">//<![CDATA[
var santyImagen=function(img,url){this.imagen=img;this.url=url;};santyAleatImg=function(santyArray){var santyAleatImgRes=santyArray[Math.floor(Math.random()*(santyArray.length))];document.write('<a href="'+santyAleatImgRes.url+'"><img src="'+santyAleatImgRes.imagen+'"/></a>');};//]]></script>

Y despues podremos colocar imagenes aleatorias donde queramos. Pero para utilizarla es necesario agregar el siguiente código donde queramos usarlas:

<script type="text/javascript">
santyImagenes = new Array();
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyAleatImg(santyImagenes);
</script>

No importa cuantas agregues, el texto color rojo debe ser cambiado por la url de tu imagen y el texto en amarillo por el enlace que quieras en la imagen.

Si quieres agregar mas de una imagen aleatoria necesitarás agregar el código mas veces:

<script type="text/javascript">
santyImagenes = new Array();
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyAleatImg(santyImagenes);
</script>

<script type="text/javascript">
santyImagenes = new Array();
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyAleatImg(santyImagenes);
</script>

<script type="text/javascript">
santyImagenes = new Array();
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen"));
santyAleatImg(santyImagenes);
</script>
Espero que te sirva, nos vemos!! y si no, pues comenta xD!!
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

21 comentarios !

●๋•╣ҜΞҜΘ╠●๋• dijo...

SANTYYYY acabo de verlooo no sabia que lo habias publicado me pongo a ello ya muchsisimas gracias!!!!!!!!!!!!

●๋•╣ҜΞҜΘ╠●๋• dijo...

no lo entiendo

1. La anchura altura de la imagen donde la defino¿?
2. Donde se supone que hay que poenr el bloque de imágenes¿?

A mi no me sale santy, esq no se me ven las imagenes en el blog con ese formato que pones ahí:(

●๋•╣ҜΞҜΘ╠●๋• dijo...

esto no sale, no sale

●๋•╣ҜΞҜΘ╠●๋• dijo...

¿Porque no pusiste un ejemplo hecho? ah claro si no sería muy fácil no entiendo pq pones entradas que no va a entender la gente, a kien te diriges tu¿? a otros hakers de internet????? menuda mierda

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, disculpa que no sirviera el código. El primer código esta incorrecto pero lo he resuelto y esta comprobado. Disculpame :X

Las imágenes que ves arriba son ejemplos hechos.

●๋•╣ҜΞҜΘ╠●๋• dijo...

Sigue sin funcionar...

●๋•╣ҜΞҜΘ╠●๋• dijo...

Entre que pones los códigos mal, entre que no los explcias bien, entre que no pones ejemplo de como hacerlo y entre que contestas muy tarde se me va la vida pa poner algo en mi blog.

Tio ¿donde cambio la altura de la imagen? me pUEdes contestar este año? esos códigos tuyos se pueden poner dentro de una tabla?

●๋•╣ҜΞҜΘ╠●๋• dijo...

Esq macho tu código no tiene sentido, no parecen imágenes si sustituimos los códigos en donde dices que hay que sustituirlas. No aparece nada, no s eve nada lo he probado de todas las formas posibles.

Y luego, si no se especifica la altura y anchura, ¿como va a salir la imagen? que yo sepa las imágens tieen un codigo así

Donde se especifica la url y los parametos la forma que va tener la imagen.

¿Tu código está incompleto? o hay que utilizarlo d euna forma que no has especificado¿? NO ENTIENDO NADA

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, solo debes colocar el primer código(SIN CAMBIAR UN SOLO ESPACIO) como lo explica arriba y después prueba colocando esto en un gadget:
<script type="text/javascript">
santyImagenes=new Array();
santyImagenes.push(new santyImagen("http://1.bp.blogspot.com/_6CFlQEBRtLc/SvpI9FpkFZI/AAAAAAAACP4/UcfYacVUY3I/mnu1.png","http://santyweb.blogspot.com/2009/11/twitcritics-calificador-de-peliculas.html"));
santyImagenes.push(new santyImagen("http://3.bp.blogspot.com/_6CFlQEBRtLc/SvpI9WwR5FI/AAAAAAAACQA/YucrILfedDs/mnu2.png","http://santyweb.blogspot.com/2009/11/twitter-en-espanol.html"));
santyImagenes.push(new santyImagen("http://3.bp.blogspot.com/_6CFlQEBRtLc/SvpI9nFIM2I/AAAAAAAACQI/hcUL4yIZKEQ/mnu3.png","http://santyweb.blogspot.com/2009/11/buscador-interno-inteligente.html"));
santyImagenes.push(new santyImagen("http://1.bp.blogspot.com/_6CFlQEBRtLc/SvpI9wTNaNI/AAAAAAAACQQ/51IIUdZnQj8/mnu4.png","http://santyweb.blogspot.com/2009/10/nuevas-barras-de-navegacion-de-blogger.html"));
santyImagenes.push(new santyImagen("http://2.bp.blogspot.com/_6CFlQEBRtLc/SvpI-L6xFkI/AAAAAAAACQY/dQTM2h4buaE/mnu5.png","http://santyweb.blogspot.com/2009/10/gadget-unico-de-comentarios-recientes.html"));
santyAleatImg(santyImagenes);
</script>
el ancho y el largo de la imagen no es necesario, la imagen es mostrada del tamaño que es.

●๋•╣ҜΞҜΘ╠●๋• dijo...

santy para mi es importante poder poner el ancho y el alto de las imágenes pq me las bajo de internet y tendría q editarlas para poner un menú de imágeens que fueran iguales.

por favor si no te improta, dime como cambio el alto y el ancho de las imágenes dentro del código aletario

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, por supuesto no había pensado en eso, puedes cambiar todo el primer código por este y sustituir las palabras en negrita para modificarlo:
<script type="text/javascript">//<![CDATA[
var santyImagen=function(img,url){this.imagen=img;this.url=url;};santyAleatImg=function(santyArray){var santyAleatImgRes=santyArray[Math.floor(Math.random()*(santyArray.length))];document.write('<a href="'+santyAleatImgRes.url+'"><img src="'+santyAleatImgRes.imagen+'" height="ALTO" width="ANCHO" /></a>');};//]]></script>

●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola santy, bueno tengo una última duda en relación a todo esto. Quisiera, si es posible, poner las fotos encima de mi menú horizonatel del top, es decir poner las fotos justo debajo de la cabecera, ¿es posible?

Los gadget de mi plantilla están preparados para ser utilizados debajo de ese menú y no se como habilitarlo arriva. Es decir, para que nos entendamos poner las imágenes JUSTO ENCIMA de donde tu tienes el menú de Inicio, Secciones,FAQ, Contacto y Entradas. ¿Es posible?

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, claro que se puede, primero entras a Diseño>Edicion HTML>Sin expandir las plantillas de artilugios. Puedes agregarlo de dos maneras:

[1] En gadgets(recomendado). Para esto puedes agregar lo siguiente en negrita:

</div>
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

<div id="foxmenucontainer">
<div id="foxmenu">

Puedes ver:http://santyweb.blogspot.com/2009/02/anadir-gadgets-entre-el-header-y-las.html para personalizar aun mas ese espacio.

[2] O manualmente en la plantilla. Para esto otro puedes agregar las imagenes en el lugar del texto en negrita:

</div>
<!-- Aqui -->
<div id="foxmenucontainer">
<div id="foxmenu">

Alianza Sofia dijo...

hey viejo quiero q mi cabecera muestre aleatoriamente fotos como le hago pues si las fotos las tengo en mi compu

●๋•╣ҜΞҜΘ╠●๋• dijo...

No entiendo Santy. Vamos aver, yo tengo habilitado poder añadir gadgets entre la cabecera y las entradas. Pero estos gadgetes quedan DEBAJO del menú del top (justo debajo). Me gustaría poner el gadget de imágenes ENCIMA del menú del top, ¿eso se puede?

Leugo en la plantilla en edición htlm no encontré la sección "foxmenucontainer" ¿hay que habilitarla? ¿como y donde se habilita?

no entiendo la diferencia en las dos maneras de aplicarlo que antes has exlicado.

Y en el psot antiguo explicas como habilitar un gadget entre la cabecera y las entradas, yo ya lo tengo habilitado, repito yo ya lo tengo habilitado pero keiro ponerlo más arriva, arriva del menú del top.

●๋•╣ҜΞҜΘ╠●๋• dijo...

perdona santy, ya lo entendí, estaba perfectamente explicado, esque soy muy torpe, sorry

●๋•╣ҜΞҜΘ╠●๋• dijo...

Entonces, ahora ya tengo agregado el gadget, y quiero poner las imágenes aleatorias que ya se como hacerlo. Ahora la duda que se me plantea es donde guardo "la base de datos de imágenes" que tienen que ir alternandose en el menú. Osea, si por ejemplo caben 5 imágenes, ¿como hago para que se intercalen en ese espacio de 5 imágenes 30 imágenes?

Espero haberme explicado en la pregunta

●๋•╣ҜΞҜΘ╠●๋• dijo...

Osea yo lo que quiero es que haya 6 imágenes que se presenten visibles y que se alternen con otras 20 o 30 que no están visibles. ¿Eso se puede?

●๋•╣ҜΞҜΘ╠●๋• dijo...

Por otro lado, puse el gadget en el top pero "me estropea la cabecer"?¿!! fijate porfa haber si se puede solucionar es mi blog de pruebas http://gnula3.blogspot.com/

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, para mostrar las seis imágenes prueba agregando seis códigos como este:

<script type="text/javascript">
santyImagenes=new Array();
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 1"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 2"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 3"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 4"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 5"));
santyAleatImg(santyImagenes);
</script>

Y en cada base de datos de cada imagen agrega 5 imágenes diferentes a mostrar:
5+5+5+5+5+5=30

o puedes agregar una base para las seis imágenes:

<script type="text/javascript">
santyImagenes=new Array();
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 1"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 2"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 3"));
.
.
.
.
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 29"));
santyImagenes.push(new santyImagen("URL DE LA IMAGEN 30"));
santyAleatImg(santyImagenes);
santyAleatImg(santyImagenes);
santyAleatImg(santyImagenes);
santyAleatImg(santyImagenes);
santyAleatImg(santyImagenes);
santyAleatImg(santyImagenes);

</script>

En este otro el código en negrita va a mostrar una imagen cada linea. Pero puede que en una de esas aparezca la misma imagen repetida.

espero no haber reburujado el tema xD

●๋•╣ҜΞҜΘ╠●๋• dijo...

no lo entiendo santy, no se ni por donde coger ese código, además las imágenes me estropean la cabecera, nu se pq... pero gracias por contestar,
un saludo!


Página Principal
Arriba