Imagen multiusos

Las imágenes flotantes se pusieron de moda hace tiempo, al principio fue algo decorativo o sin utilidad alguna que viene a ser lo mismo, más tarde llegaron las imágenes aleatorias la utilidad era la misma pero resultaba más vistoso.

Nos quisimos complicar un poco y nos decantamos por imágenes flotantes que desde el final del blog nos llevaban a inicio, más tarde ese viajecito de ir a inicio lo hicimos con efecto deslizante.

Por si eso fuera poco también añadimos el efecto para que desde inicio nos llevara al final.

Muy divertido, pero no se piensen que con eso termina el juego.

Me pregunta Shadow Sneak la forma de añadir imágenes flotantes-aleatorias-que nos lleven a inicio-con efecto deslizante ¿no es lo más cercano a una imagen multiusos?

Basándonos en las explicaciones de entradas anteriores veamos como conseguir ese efecto.

Lo principal es tener en nuestra plantilla el script de Prototype y Scriptaculous que podemos añadir justo antes de </head> si ya lo añadimos con anterioridad para otro efecto no es necesario añadirlo de nuevo.

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Una vez tenemos el script para el efecto deslizante nos dirigimos justo antes de </body> allí vamos a crear un div donde incluiremos el código que nos va a llevar a inicio, ese código es un enlace y sería algo así:

<div id='flotante'>

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>texto o imagen</a>

</div>

lo que haremos será prescindir de la parte donde añadíamos el texto o imagen, del cierre del enlace y del div.

Añadimos a continuación el script de imágenes aleatorias y este sería el código completo.

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>

<script type='text/javascript'>
// <![CDATA[
imagenes = new Array(4)

imagenes[0] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[1] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[2] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[3] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])
// ]]>
</script>

</a>
</div>

Al final hemos cerrado el enlace que dejamos abierto </a> y también añadimos el cierre del </div>

» Donde url-de-la-imagen añadimos la url de las imágenes.

» Si deseamos añadir más imágenes aumentamos el número de líneas con:
imagenes[4] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"

» Cada imagen va numerada en imagenes[X] modificaremos donde dice
imagenes = new Array(4) y sustituimos 4 por el número de nuestras imágenes contabilizando la primera imagen imagenes[0] como una imagen.

» Si deseamos que al pasar el ratón nos muestre el título añadiremos title de la siguiente forma

imagenes[1] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'title='aquí-tu-texto'/>"





Las imágenes son creaciones de « Shadow Sneak »