Retrouvez cet article dans : Linux Pratique 38

De nombreuses pages Web proposent l'affichage d'infobulles au passage de la souris sur certains termes. Celles-ci contiennent la plupart du temps une définition concise du terme, une précision supplémentaire, etc. Très pratiques pour le visiteur, ces infobulles sont aussi très faciles à réaliser...

Définir une abréviation en XHTML

Il existe deux balises destinées à la définition d'expressions abrégées :

• <abbr> est employé pour définir l'abréviation d'un terme ou d'une expression donnée, par exemple, « etc. », « Mme »...
• <acronym> est utilisé pour définir les acronymes, comme WWW (World Wide Web), LAN (Local Area Network), PNG (Portable Network Graphics), etc.

Ces balises introduisent l'expression abrégée telle qu'elle doit apparaître dans le texte. Elles s'accompagnent d'un attribut title, dont la valeur correspond à la forme développée de l'expression.

En effet, il faut bien faire la différence entre l'infobulle (définie par l'attribut title) et le texte alternatif (défini par l'attribut alt). Le texte alternatif est le descriptif textuel que l'on associe par exemple aux images et nécessaire aux visiteurs mal- et non-voyants. Ce texte apparaît lorsque l'image n'est pas présente pour une raison ou pour une autre : c'est donc bien une alternative à l'image.

Constatez que chacune des balises <abbr> et <acronym> a donc un rôle bien défini, mais l'une comme l'autre ne sont pas toujours utilisées à bon escient (il faut dire que la frontière entre les notions d'abréviation et d'acronyme peut être parfois très floue...). Cela dit, ces deux balises ont le même résultat : les mots abrégés et acronymes sont mis en évidence par un fin soulignement en pointillés. En outre, au passage de la souris, une infobulle contenant le libellé complet du terme apparaît (Fig. 1).
Les éléments <abbr> et <acronym> permettent ainsi aux auteurs d'indiquer clairement les occurrences des abréviations et des acronymes, fréquemment utilisés dans les langues occidentales. Le balisage de ces structures fournit une aide précieuse aux navigateurs Web et aux outils tels que les vérificateurs d'orthographe, les synthétiseurs de parole, les systèmes de traduction automatique et les moteurs de recherche.
Voici quelques exemples d'utilisation de ces balises :

Fig. 1 : L'utilisation des balises <abbr> et <acronym> permet l'affichage d'infobulles préformatées, dans lesquelles se trouve le libellé complet de l'expression abrégée.

<abbr title="Madame">Mme</abbr>
<acronym lang="fr" title="Services d'Aide Médicale Urgente">SAMU</acronym>
<acronym lang="en" title="Universal Serial Bus">USB</acronym>
<abbr lang="fr" title="c'est-à-dire">c.-à-d.</abbr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce interdum purus vitae neque. Etiam sodales. Vestibulum eu elit. Aliquam erat volutpat. Proin et quam. Donec lobortis elit et velit. <abbr title="Madame">Mme</abbr>. Etiam quam ipsum, gravida eu, molestie tempus, feugiat in, orci. Vestibulum a elit nec est fringilla pretium. <acronym lang="en" title="Universal Serial Bus">USB</acronym>. Mauris est augue, fermentum id, pretium sit amet, rutrum sed, eros. <acronym lang="fr" title="Services d'Aide Médicale Urgente">SAMU</acronym>. Pellentesque vitae lacus nec mi ultricies sodales. Curabitur faucibus posuere lacus.</p>

Comme vous le voyez, ces balises peuvent être insérées n'importe où dans le texte. La portion de code apparaît à l'écran comme illustré sur la figure 1.

Personnalisez vos infobulles

L'inconvénient de la méthode précédente, c'est qu'elle ne permet aucune personnalisation : l'infobulle est en effet limitée en taille et sa mise en forme est fixe (arrière-plan gris, police standard). Il existe heureusement une autre technique, basée sur l'utilisation de liens « fictifs », qui vous permettra de paramétrer l'apparence de vos infobulles selon vos souhaits. Ces liens fictifs seront en fait des liens sans cible, ou plutôt, dont la cible reste la page elle-même (l'attribut href reçoit pour valeur "#").
La portion de code évoquée dans la première partie de l'article devient :

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce interdum purus vitae neque. Etiam sodales. Vestibulum eu elit. Aliquam erat volutpat. Proin et quam. Donec lobortis elit et velit. <a class="help" href="#">Mme<span>Madame</span></a>. Etiam quam ipsum, gravida eu, molestie tempus, feugiat in, orci. Vestibulum a elit nec est fringilla pretium. <a class="help" href="#">USB<span>Universal Serial Bus</span></a>. Mauris est augue, fermentum id, pretium sit amet, rutrum sed, eros. <a class="help" href="#">SAMU<span>Services d'Aide Médicale Urgente</span></a>. Pellentesque vitae lacus nec mi ultricies sodales. Curabitur faucibus posuere lacus.</p>

Dans un premier temps, nous allons définir un sélecteur spécifique pour formater les expressions abrégées (on attribue pour cela un nom de classe, ici « help », aux liens) :

a.help {
color: #000000;
text-decoration: none;
border-bottom: 2px dashed #FF0000;
}

La mention text-decoration: none; permet de supprimer le soulignement standard (bleu) des liens hypertextes. En revanche, nous ajoutons une bordure inférieure, en pointillés rouges, pour mettre en évidence les expressions abrégées dans le texte et, par conséquent, signaler la présence d'une infobulle. N'oubliez pas de préciser la couleur de police si vous souhaitez éviter que la couleur standard des liens hypertextes soit utilisée.
Notez que le texte de l'infobulle est contenu entre des balises <span>. Celui-ci ne doit apparaître qu'au survol de la souris. Pour éviter qu'il n'apparaisse à la suite du lien, dans le flot du texte (erreur illustrée sur la figure 2), nous allons utiliser la propriété display :

a.help span {
display: none;
}

La valeur none permet de préciser que l'élément ne doit pas être affiché et qu'aucune place ne lui sera réservée dans le flot du texte.

Fig. 2 : Comme vous pouvez le voir sur cette capture, il est nécessaire de désactiver l'affichage des balises <span> à l'aide de la propriété display.

À présent, nous allons définir un style pour les liens survolés. Pour cela, rappelez-vous qu'il existe une pseudo-classe spécifique pour le formatage des liens survolés : il s'agit de a:hover. Nous choisissons un arrière-plan gris :

 a.help:hover {
background-color: #C0C0C0;
}

Enfin, il faut faire en sorte que le libellé complet s'affiche à l'écran au passage de la souris. Autrement dit, nous allons déclarer le formatage de l'infobulle au passage de la souris :

a.help:hover span {
display: block;
position: absolute;
z-index: 100;
background-color: #CCFFFF;
border: 1px solid black;
padding: 5;
width: 200px;
left: 20px;
top: 25px;
font-style: italic;
text-align: center;
}

C'est précisément dans cette déclaration que vous pourrez définir l'apparence de votre infobulle. Ici, nous avons choisi un arrière-plan de couleur bleu ciel, une fine bordure noire, ainsi qu'une police de style italique. La propriété text-align nous permet ici de centrer le texte dans sa boîte. Par ailleurs, nous avons fixé les marges intérieures à 5px, et la largeur de la boîte est fixée à 200px.

Notez bien la présence de la mention display: block; indispensable pour forcer l'affichage de l'infobulle au passage de la souris (étant donné que celle-ci a été fixée à display: none; auparavant). Sans oublier d'utiliser la propriété z-index afin de « forcer » les infobulles à se positionner au-dessus du texte.

Fig. 3 : N'oubliez pas de positionner les infobulles hors du flux de la page, sans quoi elles seront insérées dans le texte, comme illustré ici.

Notez également que la boîte de l'infobulle a été positionnée en absolute. De cette manière, elle est exclue du flux de texte et se place par rapport au dernier élément parent positionné. Sans cela, l'infobulle s'insérerait dans le flux du texte, comme le montre la figure 3. C'est pourquoi, c'est le moment d'ajouter la mention position: relative; dans la déclaration du sélecteur a.help, qui se trouve être l'élément parent de la balise <span> :

a.help {
color: #000000;
position: relative;
text-decoration: none;
border-bottom: 2px dashed #FF0000;
}

Sans cet ajout, les infobulles seraient positionnées par rapport aux bords du document par défaut (ou par rapport à un autre élément qui, lui, sera positionné).
Pour finir, les propriétés left et top vous permettent de positionner précisément l'infobulle par rapport à son élément parent (qui doit être a.help).
Le résultat final est illustré sur la figure 4.
Une remarque pour finir : il peut être pertinent d'ajouter une information sur la prononciation des abréviations et acronymes, de manière à favoriser la compréhension des visiteurs utilisant un appareil de restitution vocale. En effet, certains acronymes sont épelés alors que d'autres se prononcent phonétiquement. Pour spécifier la prononciation d'une forme abrégée dans une feuille de style, il faut utiliser la propriété speak.
On retiendra que speak: spell-out; impose une restitution en épelant (le plus approprié pour les acronymes finalement). La mention speak: normal; impose une lecture normale dans la langue définie dans l'en-tête de la page Web.