Ouverture des liens dans un nouvel onglet : la méthode trop facile

par Youcef · Publié 12 mars 2012 · Mis à jour 12 juin 2017

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.

N’oubliez pas de vérifier que vous avez la librairie jQuery.

$(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).

N’oubliez pas d’envoyer l’image sur votre serveur, grâce à un logiciel FTP.

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;
}

Attention:Cette icône représente « normalement » les liens externes, c’est à dire les liens qui pointent vers une page qui n’appartient pas à votre site. Or, le code donné ci-après affichera l’image à côté de tous les liens qui s’ouvrent dans un nouvel onglet, et ce même si la page appartient à votre site. Pour rester cohérent, soyez vigilant quand vous configurez vos liens : ne cochez la case « ouvrir dans un nouvel onglet » que pour les liens EXTERNES.

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 !