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!!