Image Link Hover - fading image Thumbnails

Mejor que explicar lo que es... pasad el ratón sobre los links que hay aquí debajo y comparadlos con los mismos que tengo colocados en mi BLOG DE PRUEBAS:


TESTLINK

Epílogo

¿A que ahora se entiende mejor? :D

Es un "preview" distinto, con efecto de thumb y cierre; y a colocar en los links que uno le parezca bien. Además, como se puede observar despliega una peqieña captura de pantalla de la página que contiene.

No sé a los demás... pero a mí me encanta. La pena es que no se pueda compatibilizar con los sweettitles, como los que tengo en este blog (y casi que prefiero dejarlos). Y es facilísimo de hacer: el único problema ha sido más o menos el de siempre: dar con el sitio exacto donde encajar los scripts. Porque... jeje.. como no, lleva scripts:

.- Un Mootools (qué raro ¿eh?) y el que contiene la pantalla, cierre, transición y demás...
Estos son los míos (aunque últimamente para las pruebas paso de andar subiéndome scripts, en este caso me ha sido necesario para incluir la imagen de cierre del "preview"):

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

<script src='http://junioscripts.googlepages.com/artViperHover.js'/>

Y ahora ¡¡OJO A LA COLOCACION!!: porque no funcionará en otro sitio (al menos a mí...) que al pie de la plantilla, justo antes del cierre del body y html.

Y nada más... sólo que podéis abrir los scripts y cambiar la URL de la Screen, del cierre, etc... como siempre, cada quien se lo guisa y se lo come (como decimos por aquí...)

.- En cuanto al HTML y la forma de llamar a los cripts, consiste en añadir al link un rel="artViper". Así:

<a href="http://www.artviper.net/webdesign.php" title="artViper designstudio webdesign" id="testlink" rel="artViper" ><strong>TESTLINK</strong></a>

Picad en este link y tendréis al autor del hack...