[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Modifier l'apparence d'une infobulle > Lecture du tutoriel

Modifier l'apparence d'une infobulle

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Ce tutorial a pour but de vous expliquer comment modifier l'apparence d'une infobulle. Je ne vous présenterai que l'une des nombreuses façons d'y parvenir.

Sommaire du tutoriel :

Présentation
Mise en place du code xHTML
Développement du CSS
Infobulle (code complet)
Exemples concrets

Présentation

Tout d'abord, qu'est qu'une info bulle ?

Il est important de différencier infobulle (title) et texte alternatif (alt).

Le texte alternatif (alt) est le descriptif textuel appliqué uniquement aux images et nécessaire au cas où il y aurait un problème lors du chargement de celle-ci par exemple. Une infobulle est une description succincte d'une icône, d'un bouton de l'interface graphique, qui apparaît sur l'écran lorsque le curseur reste quelques secondes sur l'élément auquel elle correspond. Une infobulle s'obtient en xHTML grâce à l'ajout l'attribut title le plus souvent sur les balises :

<a></a>

Code : HTML

1	<p>Cliquez <a href="accueil.html" title="Wireless Fidelity">ici</a> pour retourner à l'accueil.</p>

<acronym></acronym>

Code : HTML

1	<p>Grâce au <acronym title="Wireless Fidelity">Wi-Fi</acronym> il est possible de créer des réseaux (..)</p>

<img />

Code : HTML

1	<p>Voici une photo de mes vacances : <img src="plage.jpg" title="Mon dernier couché de soleil" /></p>

Il n'est pas possible de modifier l'apparence de l'infobulle générée par la propriété "title". Cependant, il est tout à fait envisageable de créer sa propre infobulle en utilisant une balise que l'on fait apparaître au survol du texte.

Mise en place du code xHTML

Comme vous le savez certainement, il est permis de masquer des éléments présent sur une page Web grâce à la propriété CSS "display" à laquelle on attribue la valeur "none". C'est précisément sur ce principe que nous allons baser notre infobulle. Voici tout d'abord, le code xHTML qui sera appliqué systématiquement aux éléments dont vous souhaiterez personnaliser l'infobulle :

Code : HTML

1	<a href="#" class="info">[ELEMENT]<span>[INFOBULLE]</span></a>

[ELEMENT] peut aussi bien représenter du texte qu'une image ou tout autre élément susceptible de disposer d'une infobulle. Dans notre cas, nous considèrerons que [ELEMENT] est du texte.

[INFOBULLE] correspond au texte qui sera affiché dans l'infobulle.

Voici donc notre code xHTML d'exemple :

Code : HTML

1
2
3

<p>
Grâce au <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a> il est possible de créer des réseaux locaux sans fils à haut débit pour peu que la station à connecter ne soit pas trop distante par rapport au point d'accès. Dans la pratique le <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a> permet de relier des ordinateurs portables` des machines de bureau` des assistants personnels (<a href="#" class="info">PDA<span>Personal Digital Assistant</span></a>) ou tout type de périphérique à une liaison haut débit (11 Mbps ou supérieur) sur un rayon de plusieurs dizaines de mètres en intérieur (généralement entre une vingtaine et une cinquantaine de mètres) à plusieurs centaines de mètres en environnement ouvert.
</p>

Développement du CSS

Le principe est simple, en temps normal, l'infobulle est masquée. Lorsque le texte (dans notre cas) est survolé, l'infobulle est affichée.

Voici le code CSS :

Code : CSS

* {
   font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */
   font-family: Tahoma` Verdana` Arial` serif;
}
a.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span {
   display: none; /* on masque l'infobulle */
}
a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

   top: 30px; /* on positionne notre infobulle */
   left: 20px;

   background: white;

   color: green;
   padding: 3px;

   border: 1px solid green;
   border-left: 4px solid green;
}

Si vous ne connaissez pas certaines des propriétés CSS utilisées plus haut, je vous renvois à l'annexe de M@teo21 établissant la Liste des propriétés CSS.

Infobulle (code complet)

Voici le code complet :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
   font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */
   font-family: Tahoma` Verdana` Arial` serif;
}
a.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span {
   display: none; /* on masque l'infobulle */
}
a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

   top: 30px; /* on positionne notre infobulle */
   left: 20px;

   background: white;

   color: green;
   padding: 3px;

   border: 1px solid green;
   border-left: 4px solid green;
}
</style> 
</head>

<body>
<p>Grâce au <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a> il est possible de créer des réseaux locaux sans fils à haut débit pour peu que la station à connecter ne soit pas trop distante par rapport au point d'accès. Dans la pratique le <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a> permet de relier des ordinateurs portables` des machines de bureau` des assistants personnels (<a href="#" class="info">PDA<span>Personal Digital Assistant</span></a>) ou tout type de périphérique à une liaison haut débit (11 Mbps ou supérieur) sur un rayon de plusieurs dizaines de mètres en intérieur (généralement entre une vingtaine et une cinquantaine de mètres) à plusieurs centaines de mètres en environnement ouvert.</p>
</body>

</html>

Exemples concrets

Et pour vous donner un aperçu des innombrables possibilités que vous offre cette astuce, voici d'autres mises en forme (toujours avec le même code xHTML, il n'y a que le CSS qui change) :

Style du cours :

Image utilisateur

Style infobulle Windows XP:

Image utilisateur

Un peu plus complexe mais utilise le principe que je vous ai enseigné :

Image utilisateur

Et pour terminer un système d'aperçu d'image :

Image utilisateur

Libre à vous désormais de modifier vos infobulles. On peut imaginer un tas d'application à cette astuce, sachant qu'une image peut être affichée dans l'infobulle, vous pourriez par exemple réaliser un système d'aperçu d'image.

Comme toujours les possibilités ne se limitent qu'à votre imagination.

Ce tuto se touche à la fin. J'espère avoir été le plus clair possible, si ce n'est pas le cas, notifiez le via le système de commentaire, je me ferai une obligation de corriger les points ambigus.

Citation : Duc de La Rochefoucauld

L'esprit s'attache par paresse et par constance à ce qui lui est facile ou agréable ; cette habitude met toujours des bornes à nos connaissances, et jamais personne ne s'est donné la peine d'étendre et de conduire son esprit aussi loin qu'il pourrait aller.

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité