Comment faire apparaitre un petit texte explicatif (bulle d'aide) quand on passe la souris sur une image à cliquer ou un simple lien texte ?

  1. Avec ALT et des images ordinaires
  2. Avec ALT et des images à liens multiples
  3. Avec TITLE
  4. Sur des liens texte
  5. Sur du texte sans lien
  6. Bulles javascript
  7. Pour finir : d'autres techniques

Il y a plusieurs façons d'y arriver en HTML classique... dont aucune n'est satisfaisante pour tout le monde :-((

La méthode ALT pour les images ordinaires
(IE4+ et NN4+, mais sur PC-Win seulement — à éviter —)

Le Coin des Experts offre de véritables trésors L'attribut ALT était initialement prévu pour que les navigateurs non graphiques puissent afficher un texte de remplacement à la place des images (c'est aussi le texte qu'on voit brièvement lors du chargement de l'image). On s'en sert parfois pour afficher une bulle d'aide. Soulignons qu'il s'agit de deux emplois tout à fait différents : par exemple, le texte de remplacement pour l'icone ci-contre serait certainement un descriptif « coffre à trésor » tandis que la bulle d'aide va pouvoir apporter quelque chose qui n'est pas forcément dans l'image. Le texte apparaît si on immobilise la souris une seconde environ et il disparaît au bout d'une seconde ou deux.

Le codage est tout simplement 
 <A HREF="lien.html"><IMG SRC=... ALT="texte de 
     l'infobulle"></A>
(avec Claris Home Page, il suffira de taper le passage en gras dans la case Autre HTML de l'éditeur d'objet. La bulle d'aide ne se verra pas dans la visualisation de CHP, mais seulement sur un navigateur... capable de montrer ces bulles)

Il est recommandé de mettre un texte court. Si on passe outre, NN va essaie de l'afficher sur une seule ligne, en travers de tout l'écran, tandis que IE va prendre plusieurs lignes, mais avec des passages à la ligne imprévisibles et non contrôlables.

Ça ne fonctionne pas sur Mac. Insistons sur le fait qu'il s'agit d'un détournement de la fonction de ALT et qu'il vaut mieux utiliser l'attribut TITLE qu'on va voir plus loin, et qui fonctionne partout en 2003. Il faut néammoins conserver un attribut ALT pour le texte de remplacement de la figure.

   

La méthode ALT pour les images à liens multiples
(Seulement IE5 sur PC-Windows — à éviter, pour les mêmes raisons)

polygone rectangle cercle cherchez les zones sensibles La méthode consiste à mettre des champs ALT dans les lignes AREA SHAPE, en plus du ALT éventuel dans la balise <IMG>. Ce dernier apparaîtra quand on arrête la souris sur l'image en dehors des zones sensibles alors que les bulles pour celles-ci apparaîtront quand on y arrêtera la souris. Essayez avec l'image ci-contre... surtout si vous avez Explorer.

Ça fonctionne comme pour les images ordinaires :
— sur IE5 sur PC-Windows, tout marche
— sur Mac, rien ne marche :-(((
— sur NN4.7-PC, seule la bulle pour le fond d'image fonctionne régulièrement.

Le code a simplement l'allure ci-dessous : 
 
 <MAP NAME="liste">
 <AREA SHAPE="poly" COORDS=...  ALT="texte 1" >
 <AREA SHAPE="rect" COORDS=...  ALT="texte 2" >
 <AREA SHAPE="circle" COORDS=...  ALT="texte 3" >
 </MAP>
 <IMG SRC=...  USEMAP="#liste" ALT="bulle de fond d'image">
(avec Claris Home Page, ces additions de code se font nécessairement dans le fenêtre du code HTML; on cherchera les lignes AREA SHAPE et on ajoutera les ALT à la main)

 

   
coffre à trésors
ALT et TITLE ensemble TITLE seul
polygone rectangle cercle cherchez les zones sensibles
TITLE seul ALT et TITLE ensemble

La méthode TITLE

L'attribut TITLE fait partie des recommandations du HTML 4, mais en début 2000, il n'avait été implanté que dans le seul Explorer, — peut-être comme une alternative à ALT, dans l'intention de dissocier la fonction "texte alternatif" destinée aux navigateurs non graphiques de la fonction "bulle d'aide". Si c'est vraiment le but recherché, il faut mettre mettre les TITLE="bulle d'aide" à côté des ALT que nous venons de voir, et utiliser des textes différents. Essayez avec les images ci-dessus. Tous nos textes TITLE commencent par "bulle", alors que les ALT sont les mêmes que précédemment.

Le codage est tout simplement, pour une image simple : 
 <A HREF="lien.html"><IMG SRC=... ALT="texte de 
     remplacement" TITLE="texte infobulle"></A>
Rappelons que vous devez conserver un attribut ALT dans vos figures.

Avec Claris Home Page, les TITLE s'implantent de la même façon que les ALT précédents.

Bulles d'aide sur des liens texte

La fonction de telles bulles pourrait être de préparer le lecteur à ce qu'il va trouver dans le lien. Une première technique est de faire apparaître un message dans la barre d'état, au moyen d'un peu de javascript dans le lien : 
 
<A HREF="page.htm" 
onmouseover="self.status='message...';return true;">...
Mais on peut légitimement estimer qu'une véritable bulle d'aide à proximité du lien s'imposera plus aisément à l'attention du lecteur. On peut alors mettre un TITLE dans le lien : 
 <A HREF="page.htm" TITLE="bulle d'aide">...
mais, à nouveau, cela fonctionne sur IE4+ mais pas sur les NN4.x.

A titre de démonstration, passez la souris sur les deux liens ci-dessous, d'abord pour le message dans la barre d'état, puis, si vous avez un IE4+, pour une vraie bulle d'aide

...ou sur du texte sans lien

Si vous avez un Explorer 4+, immobilisez la souris n'importe où dans cette phrase  : vous devriez voir apparaître une bulle d'aide. Cet effet est obtenu en encadrant le texte à singulariser entre une balise du HTML 4 <SPAN TITLE="bulle d'aide"> , toujours avec le même attribut TITLE , et la balise de fermeture corespondante </SPAN> .

Outre le défaut habituel d'implantation du TITLE sur NN4.x, on peut s'interroger sur l'utilité réelle de cette fonctionnalité. Mais c'est à l'imagination des auteurs de parler...

Javascript

On l'a vu, aucune technique HTML ne permet d'avoir des bulles d'aide de manière fiable sur toutes les configurations. Il était donc tentant d'essayer de trouver une solution javascript plus universelle. Bien entendu, les visiteurs qui auront inhibé leur javascript n'en bénéficieront pas, mais ils constituent une toute petite minorité.

Coffre à trésor polygone rectangle cercle

On trouve maintenant de nombreux scripts de bulles d'aide... mais qui ne fonctionnent trop souvent que sur un nombre restreint de navigateurs. Nous renverrons donc à notre propre script, dont le fonctionnement est expliqué en détail dans un article séparé. Passez la souris sur les deux liens de ce paragraphe ou sur les images à droite et à gauche pour en découvrir les résultats.

Ce script définit deux fonctions bulle() et couic() qu'on appelle ensuite dans les liens de la manière suivante: 
<A HREF="lien.html"
onMouseOver="bulle('message de la bulle',event)" 
onMouseOut="couic()" >cliquez ici</A>
Vous pouvez évidemment modifier le texte « message de la bulle » comme vous le voulez, mais pas le reste. Allez sur notre article pour avoir tous les détails.

Pour une image à liens multiples, on mettra les OnMouseOver et OnMouseOut dans les lignes AREA SHAPE.

Ce script fonctionne sur de nombreux navigateurs (NN4, NN6, IE4+, Mozilla...) mais hélas pas encore sur Opera à cause d'une déficience de celui-ci, qui sera peut-être réparée dans les versions à venir... En attendant, nous proposons aussi un deuxième script, à peine plus contraignant à l'utilisation, mais qui fonctionne aussi sur Opera.

Et, pour finir, n'oubliez pas...

...que la fonction "bulle d'aide" peut souvent être remplie par un texte apparaissant sur la barre d'état. L'avantage est que cela fonctionne même sur les vieux navigateurs ; l'inconvénient est que cela masque l'URL des liens (décidémment, on ne peut jamais tout avoir :-))). Cliquez ici pour les explications. Ça marche aussi pour les images à liens multiples :

polygone rectangle cercle cherchez les zones sensibles

Et si vous trouvez ces messages dans la barre d'état trop discrets, vous pouvez aussi utilisez des rollovers déportés en guise de bulle d'aide. Ça marche avec tous les systèmes et ça réagit très vite (si vous avez bien préchargé) ; la rançon est qu'il faut faire des images de toutes les bulles et qu'il qu'il faut réserver un endroit dans la page pour les faire apparaître.

Charles – Gérald