Ouverture des liens dans un nouvel onglet : la méthode trop facile
Dans le premier épisode de cette série, vous avez compris l’inconvénient à obliger vos utilisateurs à ouvrir un lien dans un nouvel onglet. Dans le second, vous avez découvert une façon correcte d’implémenter ce comportement, en trois étapes. Vous avez du mettre les mains dans le code !
Une alternative beaucoup plus simple
Dans ce troisième épisode, voyons une alternative beaucoup plus simple: comment améliorer les liens externes en touchant au minimum au code?
Jusqu’à présent, vous avez créé vos liens avec votre CMS en cochant la case « ouvrir ce lien dans un nouvel onglet » ou, pour les plus courageux, en tapant target= »_blank » dans la balise HTML. Ne changez rien! Continuez à faire comme vous avez l’habitude.
Vous allez installer un petit script qui travaillera pour vous une bonne fois pour toute. Il affichera l’icône 
automatiquement, dès qu’un lien externe est trouvé dans vos textes.
Le résultat
Voici un exemple du résultat recherché : Mais où mène ce lien ?
Cette technique n’est pas 100% ergonomique ni valide car vous continuez d’utiliser l’attribut target= »blank ». Néanmoins, elle améliore quelque peu la navigation à partir d’un ordinateur classique et elle est simple à mettre en place. Vous avez tout intérêt à la mettre en place.
Code less, Do more
Placez ce code dans un fichier Javascript appelé sur toutes les pages du site.
$(document).ready(function(){
$('a[target="_blank"]')
.append('
<img class="external-link" title="Ce lien s\'ouvre dans un nouvel onglet" src="/external_link_green.png" alt="lien externe" />
<pre>');
});
L’image utilisé dans cet exemple est « external_link_green.png ». Elle se situe à la racine du site (directement dans le répertoire www).
Télécharger ce pack que j’ai préparé pour vous. Il contient l’image standard en 5 coloris différents (pour mieux l’accorder à votre design).
Enfin, pour donner la touche finale, nous allons positionner correctement l’icône. Placez ce code dans votre fichier CSS:
.external-link{
margin: 0 0 0 3px;
vertical-align: super;
}
Vous voilà avec le minimum à mettre en place, vous n’avez plus d’excuse pour ouvrir vos liens externes dans un nouvel onglet sans avertir vos visiteurs !
