Generar imágenes de vista previa al pasar por los links

Este es uno de los códigos más interesantes y útiles que he conseguido sacar. Personalmente me resulta muy útil y vistoso.

Para ver en acción el efecto, poner el puntero del ratón en los links de mi sidebar (los que están en la parte más azul).

Para implantarlo en vuestro blog debéis hacer lo siguiente.

1. Colocar los scripts necesarios en vuestra plantilla
2. Colocar el código CSS en vuestra plantilla
3. Colocar el código a los links que vayan a generar vista previa (una clase y la url del servicio websnap)

Paso 1. Colocar los scripts en la plantilla:

• Copiar el código y poner justo por encima de </body>
• Conviene que descarguéis los scripts y los subáis a vuestro propio servidor, ya que no puedo asegurar que permanezcan online los que yo misma he subido. Si no tenéis servidor para este tipo de archivos podéis usar http://www.opendrive.com que ofrecen 5GB gratis.

Código Javascript

<script language='JavaScript' src='http://www.opendrive.com/files/6972074_SfG13/jquery.js' type='Text/JavaScript'></script>
<script language='JavaScript' src='http://www.opendrive.com/files/6972120_X0FwO/main-thumb.js' type='Text/JavaScript'></script>

Paso 2. Colocar el código CSS en vuestra plantilla:

• Copiar el código y poner justo encima de ]]></b:skin>

#previa{
position:absolute;
border:1px solid #000;
background:#111;
padding:5px;
display:none;
color:#fff;
}

Paso 3. Colocar el código en los links:

<a class="previa" href="la_url_del_enlace"  rel=http://images.websnapr.com/?url=la_url_del_enlace">Texto del link</a>

En resumen, una vez hechas las modificaciones correspondientes en la plantilla, se trata de incluir en los links que van a generar imagen previa la parte marcada en rojo.

Consejo: conviene que tengáis el código que se usa para los links en un .txt y a mano, eso os facilitará la tarea de recordar lo que hay que poner o simplemente podéis copiar/pegar y cambiar las url.

Nota: Cómo podéis comprobar uno de los scripts en la librería jQuery, si ya tenéis esta libreria en vuestra plantilla, no es necesario colocarla de nuevo. En este caso sólo sería necesario poner en la plantilla el script main-thum.js

Cómo descargar y guardar los scripts:

Click en los links y en el menú del navegador click en "Archivo" > "Guardar como..."

• http://www.opendrive.com/files/6972074_SfG13/jquery.js
• http://www.opendrive.com/files/6972120_X0FwO/main-thumb.js