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

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.

                 
                 
                 
       

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: "

• Plus

  • Email
  • Lien
  • Imprimer

Partager l'article !   Indiquez clairement que le lien va s'ouvrir dans une nouvelle fenêtre grâce au CSS: Mise à jour le 29/09/2006 17:05 L'ouverture d'un lien ...

0 Voir le commentaire Voir les 0 commentaires Publié dans : CSS

Précédent : Gérez votre espace de stockage... Retour à l'accueil Suivant : PêUR... C'est qui ce gars?!!?