Fisheye

Otra y diferente manera de hacer un menú: a base de iconos que muestran el vínculo al que se refieren... con un efecto especial: el "ojo de pez".

Comencé viéndolo en Mootools, tan lleno de scripts que se me quitaron las ganas (sobre todo porque en esta web hay que ser detective o vidente para encontrar los dichosos "downloads").
Y terminé, para variar, por arreglármelas a mi manera, usando (exclusivamente) un script y un CSS de Fisheye (así como el HTML, claro...).

Lo explico en otro momento. Por ahora, quien tenga curiosidad, puede verlo en IMAGEN.
Hay iconos "repes"... pero... ¿he dicho ya que me llevo fatal con eso de las imágenes :( ?. Me ha llevado todo el tiempo el intentar encontrar cuatro iconos y, al final, así va... total: es un ejemplo para que se vea cómo funciona ;)

---------------------------------

Vamos a la explicación (qué pereza...):
.- Para empezar, coloacmos entre el head y /head de nuestra plantilla extendida, los siguientes scripts:

<script src='http://junioscripts.googlepages.com/fisheye.js' type='text/javascript'/>

<link href='http://junioscripts.googlepages.com/fisheye.CSS' media='screen' rel='stylesheet' type='text/css'/>

OJO!!: cOMO SIEMPRE, RECOMIENDO QUE CADA QUIEN SE SUBA SUS PROPIOS SCRIPTS, porque si pasa algo en el "archivo" de una servidora o de quien sea nos proporciona los scripts, entonces... reclamaciones al maestro armero... (al menos a mí, las gracias por un hack logrado, pocas veces... pero protestar, eso sí que se hace bien en este blog, jajjajaaa :$ )

.- Un HTML a insertar en el lugar donde queramos ver el despliegue de iconos con efecto "fisheye":

<ul id="fisheye_menu">

<li><a href="http://imagen-junio.blogspot.com/"><img src="http://4.bp.blogspot.com/_BQrzxz9-EQk/R0oT9swdokI/AAAAAAAAB4U/5N418AXurkE/s320/icon.gif" alt="Inicio" /><span>Inicio</span></a></li>

<li><a href="#http://cafe-junio.blogspot.com/"><img src="http://1.bp.blogspot.com/_BQrzxz9-EQk/R0oUR8wdolI/AAAAAAAAB4c/WLMA6TDw1aw/s320/icon2.gif" alt="Epílogo" /><span>Epílogo</span></a></li>

<li><a href="http://cuentos-historias.blogspot.com/"><img src="http://3.bp.blogspot.com/_BQrzxz9-EQk/R0ocKcwdopI/AAAAAAAAB48/HwjfNqllVWk/s320/datedragon.gif" alt="Revolutum" /><span>Revolutum</span></a></li>

<li><a href="http://nada-junio.blogspot.com/"><img src="http://2.bp.blogspot.com/_BQrzxz9-EQk/R0objMwdooI/AAAAAAAAB40/oXY0Xv1_tps/s320/arrows_grey_060.gif" alt="Nada" /><span>Nada</span></a></li>



<li><a href="http://hiperadri.blogspot.com/"><img src="http://4.bp.blogspot.com/_BQrzxz9-EQk/R0oT9swdokI/AAAAAAAAB4U/5N418AXurkE/s320/icon.gif" alt="El Juego..." /><span>Juego</span></a></li>

<li><a href="http://vienna-main.blogspot.com/"><img src="http://1.bp.blogspot.com/_BQrzxz9-EQk/R0oUR8wdolI/AAAAAAAAB4c/WLMA6TDw1aw/s320/icon2.gif" alt="Main" /><span>Main</span></a></li>

</ul>

Cambiad las URL de las imágenes, así como las de sus vínculos de referencia, por las vuestras.
Y ya está...