DLink, un script JS pour décorer les liens de vos sites


Les fidèles de websourcing.fr, qui lisent les billets directement sur le blog, ont dû remarquer que mes liens sont décorés avec de petites icônes. Je trouve que cela met en valeur les liens et donne une information sur le type de la cible.

Par exemple, un lien vers Google affichera la petite icône du G coloré de Google juste à côté. Vous savez ainsi immédiatement que le lien va vers Google.

J’ai réalisé ceci avec quelques lignes de code javascript qui rapatrie le favicon des sites ciblés.
 

DLink est un script qui permet de décorer les liens de vos sites web, en leur ajoutant une icône significative.


 

DLink s’utilise très simplement, en ajoutant un appel vers un fichier javascript et quelques classes CSS.
Il vous suffit d’insérer le script dans vos pages :

<script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script>

 

Vous pouvez hotlinker le script chez son auteur, il le met à disposition de cette façon (mais ouvs pouvez également le télécharger, pour le modifier par exemple). Ainsi, vous n’avez rien à télécharger et les mises à jours se font automatiquement.

Ensuite, si vous souhaitez limiter l’action du script à certaines sections, il vous suffit de leur ajouter la classe dlink :

<div class="dlink">
vos <a href="#">liens</a> seront décorés dans cette section ...
</div>

 

Le script ajoutera automatiquement quelques classes CSS à vos liens. Si vous souhaitez qu’ils aient une couleur particulière, vous pouvez utiliser ces classes pour le faire. Par exemple :

 a.internal     {color: #D47700;}
 a.external    {color: #0074D4;}
 a.subdomain {color: #D43500;}
 a.email        {color: #00B235;}

 

Par défaut, le script est prévu pour afficher le favicon d’un site. S’il n’existe pas, il affichera une icône choisie par son l’auteur du script mais qui reste très générique.

Pour les liens qui pointent vers des documents ou fichiers, si le type est connu (.doc, pdf, …), il affichera une icône représentant le type.
Vous pouvez visualiser toutes les icônes sur le site de l’auteur du script.

Bien entendu, vous pouvez ignorer certains liens. Il vous suffit alors d’utiliser la classe no_dlink :

<a href="#" class="no_dlink">ignorer ce lien</a>

 

Une chose ne m’a pas plu dans ce script. Il modifie les titres des liens pour afficher si le lien est interne, externe, … pas très bon pour le SEO. Mais rassurez vous, vous pouvez désactiver cette fonctionnalité en ajoutant une directive (notitles) dans l’appel du script :

<script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js?notitles"></script>

 

Il en est de même pour l’ouverture des liens externes dans une nouvelle fenêtre (notargets) et pour les liens vers des emails (nomailevents).

<script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js?notargets&notitles&nomailevents"></script>

 

Il existe même un plugin pour les utilisateurs de WordPress, créé par un aficionados de ce script.

Mon avis

J’aime beaucoup ce script car il est générique et autonome (il ne repose sur aucun framework). Je pense qu’on peut un peu l’améliorer, notamment pour permettre de choisir les images et utiliser des sprites CSS.
Mais il est excellent de base pour le webdesigner qui n’a pas envie de perdre du temps à tweaker la fonctionnalité.

En savoir plus sur DLink