Indiquez clairement que le lien va s'ouvrir dans une nouvelle fenêtre grâce au CSS

Publié le par PêUR

Mise à jour le 29/09/2006 17:05

L'ouverture d'un lien dans une nouvelle fenêtre est sujet à certains griefs (historique de navigation brisé, nombreuses fenêtres, confusion des nouveaux utilisateurs, choix fait à la place de l'internaute) mais peut toutoutefois être justifié (statistiquement déperdition de pages visitées pour le site initial, affichage d'informations complémentaires).

Personnellement, j'ai choisi depuis quelques temps d'expliciter clairement qu'un lien s'ouvre dans une nouvelle fenêtre en ajoutant une petite image à la droite des liens externes à mon blog.

Je me propose dans cette article de vous présenter une manière simple pour ajouter une telle image, et ce, entièrement en CSS. [Ami Over-Bloguien, cela signifie que quelque soit ton niveau (confiance, privilège ou premium) tu peux utiliser cette méthode.]

 

Exemples

Voici quelques liens externes avec différentes images pour comprendre de quoi je parle:

Francisek
Blogmarks.net
Netvibes 

 

Insérez le code CSS qui va bien

Dans votre feuille de style insérer le code suivant:

CSS

a.external {
    background: transparent url(http://url_image.gif) no-repeat right top;
    padding: 0 14px 0 1px;
}

Vous pouvez le mettre aux niveaux des éléments simples de votre CSS (h1, h2, h3, a, a:hover, etc.)

Veillez à remplacer http://url_image.gif par l'url de l'image que vous souhaitez voir apparaître avec votre lien. Si vous ne savez pas comment récupérer cette url, allez faire un tour sur cet article.

Selon la largeur de votre image vous devez modifier le padding-right du code ci-dessus. Cela correspond à la deuxième valeur (14px) de padding. Ne touchez pas aux autres valeurs... surtout le 1px qui permet de résoudre un bug Internet Explorer empêchant l'affichage de l'image.

Si vous préferez que l'image soit à gauche du lien, il suffit d'intervertir les valeurs 1px et 14px de la propriété padding et de remplacer la valeur right par left à la propriété background.

Au paragraphe suivant, vous trouverez quelques images que vous pouvez utiliser pour styler vos liens externes.

 

Images libres de droit

Les images ci-après sont libres de droit, elles proviennent des sites suivants: SomeRandomDude , StyleGala , FamFamFam , Ndesign-studio  et WebSiteIcons .

Vous pouvez les télécharger en faisant un clique-droit sur celles qui vous intéressent puis enregistrer l'image sous.... Il ne vous reste plus qu'à les uploader dans votre espace de stockage.

external1  external2  external3  external4  external5  external6  external7  external8  external9  external10
external11  external12  external13  external14  external15  external16  external17  external36  external19  external20
external21  external22  external23  external24  external25  external26  external27  external28  external29  external30
external31  external32  external33  external34  external35

 

Appliquez le style défini à vos liens externes: méthode simple par l'éditeur Over-Blog (FCKeditor)

Voici les étapes à suivre pour créer un lien s'ouvrant dans une autre fenêtre avec le style crée ci-dessus à partir de l'éditeur FCKeditor.

1/ Saisir le mot ou la phrase qui illustre votre lien,
2/ Sélectionner ce mot/cette phrase,
3/ Cliquez sur le bouton de la barre d'outils représentant un petit maillon et permettant d'éditer/modifier un lien,
4/ Dans le premier onglet du formulaire de création de lien, saisir l'URL de la page devant s'ouvrir dans une nouvelle fenêtre,
5/ Dans l'onglet Destination, sélectionnez _blank afin qu'une nouvelle fenêtre s'ouvre,
6/ Dans l'onglet Avancé, saisir external dans le champ Classe de Feuille de style.

Pour plus de détail, consulter l'article Insérer un lien à partir de l'éditeur FCKeditor.

 

Appliquez le style défini à vos liens externes: méthode directe par le code HTML

Si vous avez l'âme d'un garagiste et que vous n'avez pas peur de mettre les mains dans le cambouis, en mode HTML rajouter les attributs target et class à vos liens que vous souhaitez voir s'ouvrir dans une nouvelle fenêtre.

Voici un exemple type de code HTML:

HTML

<a href="page-à-afficher.html" target="_blank" class="external">Je m'ouvre dans une nouvelle fenêtre</a>

Vous obtenez alors: Je m'ouvre dans une nouvelle fenêtre .

 

Allez plus loin grâce aux selecteurs d'attribut

Les recommendations CSS2  permettent de "styler" les attributs attachés à un élément grâce à la syntaxe [attribut=valeur].

Dans un lien s'ouvrant dans une autre fenêtre, target est un attribut de valeur _blank de l'élément a.

Pour appliquer un style aux liens externes sans pour autant ajouter le nom d'une class dans la balise html <a ...>, on peut utiliser le code suivant:

CSS

a[target=_blank] {
    background: transparent url(http://url_image.gif) no-repeat right top;
    padding: 0 14px 0 1px;
}

 

Allez encore plus loin grâce à la pseudo-classe :after

Plutôt que d'utiliser une image vous souhaitez utiliser un caractère unicode , rien de plus simple avec la pseudo-classe :after.

A l'exemple précédent on peut remplacer background par:

CSS

a[target=_blank]:after {
    content: "

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Jacky 11/09/2007 16:25

Juste une petite question.

Comment on fait pour ajuster la hauteur de l'image? J'ai modifier les 0, mais ça ne marche pas.

Jacky 11/09/2007 15:16

Bonjour PêUR.

Elle est génial votre idée!!
Sur mon blog, j'ai dû juste enlevez external et mettre a à la fin de chaque titre-bloc.

Merci, merci infiniment.

maxime 10/09/2007 18:33

Serait-il possible d'avoir le code pour un CSS version 2 (over-blog) ? (ce serait génial)
merci !

CHEMINO KAOS 05/11/2006 00:29

Et une nouvelle fois un tres bon article tres bien expliqué , bravo !!!
j'ai essay2 et ca fonctionne tres bien dans mes articles , mais malheureusement cela ne fonctionne pas sur les liens de mes menus (les menus vienne de ton blog ) que doit je faire pour que cela fonctionne ?

PêUR 05/11/2006 12:45

Si tu rajoutes la classe external dans tes liens de menu, cela devrait fonctionner.
Item 1
Sinon laisse un lien de menu avec la class external est dit moi lequel c'est j'essaierai de voir ce qui cloche.

Alexandre 16/09/2006 12:09

Ok c'est bon sa marche ( j'avais pas lu la fin de l'article XD) merci ;)

PêUR 17/09/2006 14:06

;-)