Dlink, personaliza tus enlaces con mini-iconos de forma automática

A través de un pequeño fichero Javascript podremos personalizar el aspecto de los enlaces de nuestra página web o blog  añadiendo un pequeño icono que los identifique como enlaces externos, internos, e-mail, punto de ancla, fichero de audio o video, flash, etc. Los iconos son imágenes .PNG sin fondo, de forma que podremos usarlos en cualquier sitio sin importar el color o background.

Para utilizarlo, podremos importar el javascript directamente desde la web del autor, por lo que siempre lo tendremos actualizado, aunque yo prefiero descargarlo y subirlo a mi FTP (por motivos de seguridad). Basta con asignar la clase class=»dlink» a cualquier contenedor (div, p, table, etc) de nuestra web donde queremos que los enlaces se vean afectados por los nuevos estilos. En caso de que no deseemos aplicar el estilo a algún enlace, tendremos que asignarle  la clase class=»no_dlink».

Dlink, personaliza tus enlaces con mini-iconos automáticamente

Automáticamente, el script detectará qué tipo de enlace es: externo, interno, dirección de correo, punto de ancla, un tipo de archivo determinado, etc., y seleccionará el icono que le corresponda. Por ejemplo, si es un enlace interno, aprovechará el favicon de nuestra web en caso de que lo tengamos, si no, utilizará un icono de la Tierra; para los enlaces de punto de ancla, obviamente, el icono es un ancla.

En caso de que decidamos descargar el javascript y subirlo a nuestro FTP, tendremos que bajarnos también los iconos y subirlos a una carpeta llamda ../gfx o bien modificar el código y cambiar las rutas relativas a absolutas que apunten a la web del autor.

Esta utilidad podríamos desarrollarla fácilmente con jQuery, sin embargo, el script Dlink ocupa menos de 1kb y no necesita importar ninguna libreria javascript.

Más info | http://oopstudios.com/dlink/index.html
Fuente | http://www.visual-blast.com

Un comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

What is 9 + 15 ?
Please leave these two fields as-is: