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

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 Image des liens externesautomatiquement, 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('</pre>
<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).

Image des liens externes

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! Quand passez-vous à l’action?

MarieEve


Image courtesy of http://www.freedigitalphotos.net

CSS, débutant, HTML, JavaScript, ouvrir un lien dans un nouvel onglet

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

Trackbacks/Pingbacks

  1. Passez votre blog Wordpress en DoFollow | Les Doigts dans le Net - [...] vous souhaitez que ce lien s’ouvre dans un nouvel onglet (sans icône), vous devez ajouter cette fonction à la…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint