Menu de Imagenes aleatorias II

Pues como todo va mejorando con el tiempo, o al menos eso parece, ya habíamos posteado como colocar imagenes aleatorias con un enlace en ellas, pero ahora es posible colocarles un titulo, es decir, que al pasar el mouse aparezca un tooltip con el titulo de la imagen o el titulo de la página a la que se dirige:

/!\ 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.

Para ejemplo tenemos la siguiente imagen aleatoria:



En funcionamiento es idéntico al menú anterior por lo que si agregamos mas de una imagen, es aconsejable no colocar las mismas imágenes en los bloques pues podría salir la misma imagen:


La utilización es identica al menu antes publicado: 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,tit){this.imagen=img;this.titulo=tit;this.url=url;};santyAleatImg=function(santyArray){var santyAleatImgRes=santyArray[Math.floor(Math.random()*(santyArray.length))];document.write('<a title="'+santyAleatImgRes.titulo+'" alt="'+santyAleatImgRes.titulo+'" href="'+santyAleatImgRes.url+'"><img alt="'+santyAleatImgRes.titulo+'" 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","Titulo del tootlip"));
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen","Titulo del tootlip"));
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. Mientras que el texto en color verde es el tooltip que aparecerá al paso del mouse.

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","Titulo del tootlip"));
santyImagenes.push(new santyImagen("url de la imagen","link de la imagen","Titulo del tootlip"));
santyAleatImg(santyImagenes);
</script>

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

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

Ojalá funcione xD!!