Faire un acronyme n'est pas très compliqué en xhtml, le problème est qu'il n'est pas possible de personnaliser cet acronyme. Même le changement de couleur dans l'acronyme est impossible.

Vous devez certainement vous dire que pourtant les acronymes sur trivial webz sont rouges et s'affichent au dessus du texte. C'est vrai, mais c'est parce que nous n'utilisons pas la balise <acronym>, nous utilisons uniquement les propriétés css pour faire apparaître le texte de l'acronyme lorsque l'on passe le curseur sur le texte concerné et pour personnaliser l'apparence de notre acronyme personnalisé.
Nous allons vous expliquez comment procéder pour obtenir des acronymes personnalisés.

Dans ce tutoriel vous aurez besoin de:

• L'attribut css display
• La pseudo-propriété hover
• Le positionnement
• La balise <span>

Le code XHTML

Le code n'est pas très compliqué une fois de plus. Il faut dans un premier temps entourer notre acronyme par des balises <span>. Ajoutons-y un class="acronym".
A l'intérieur de ce <span>, placez un autre <span> qui entourera le texte à afficher lors du passage du curseur de la souris. Ajoutez lui la class="valeur_acronym".

Voici ce que vous devriez obtenir:

Le code CSS

Nous n'allons pas vous donner la solution en un bloc, nous allons procéder pas à pas.

Si vous testez le code xhtml au dessus, vous verrez que la valeur de l'acronyme est affichée à coté de votre acronyme. Nous allons donc dans un premier temps masquer ce texte.
Pour masquer cet élément, utilisez la propriété css display: none; qui ne va pas uniquement masquer la valeur de l'acronyme mais l'ignorer complètement.
Il existe une propriété qui masque un élément sans l'ignorer mais ici, si vous l'utilisez, il y aura un blanc de la même taille que le texte à masquer entre votre acronyme et le texte qui le suit, ce n'est pas le but...

Maintenant nous allons en quelque sorte "fixer" l'acronyme avec un position: relative;
Cette opération évite que votre texte ne se décale au moment où la valeur de votre acronyme s'affichera (si vous ne me croyez pas, essayez donc...).

Voici le code css à ajouter:

Il reste maintenant à gérer l'affichage de l'acronyme puis à le personnaliser.
C'est ici que nous utiliserons la pseudo-propriété hover.
Pour résumer, lorsque l'on passe le curseur de la souris sur l'acronym, on affiche la valeur_acronym.

Pour afficher le texte, nous utiliserons un display: inline;

Il faut ensuite le placer. Nous utiliserons un positionnement absolu pour effectuer cette opération.

Pour finir, ajoutons un fond rouge derrière la valeur de l'acronyme lorsqu'elle s'affiche.

Au final, il faut ajouter le code css suivant:

Admirez le résultat...
Et là, une bonne partie d'entre vous dira: "c'est moche!!!!! Je préfèrerai que ça soit affiché sur une ligne!!!"
Nous sommes d'accord avec vous et nous allons réparer ce petit problème. Ce qu'il se passe: à chaque espace, il y a un retour à la ligne. Ajoutez cette ligne:
white-space: nowrap;

Et voila c'est réparé!

Résumons un peu tout cela:

Modifier l'exemple

Ce tutoriel est maintenant terminé mais ne vous arrêtez pas ici, il y a beaucoup d'améliorations possibles.
Commencez par personnaliser vous même les acronymes en y appliquant vos couleurs ou une bordure par exemple.
Vous pouvez aussi par exemple faire un système d'aperçu d'image: lorsque vous passez le curseur sur un lien amenant vers une image, faites apparaître un petit aperçu de l'image.

Ceci n'est qu'un exemple, à vous d'imaginer d'autres possibilités...