Il n'est pas possible d'insérer une infobulle avec ce tutoriel, ni avec autant de liberté.
En effet, ce tuto se base sur une imbrication de balise, et la balise area se ferme toute seule à la fin (si elle est bien écrite), de cette façon (remarque le slash à la fin!) :

Code:

<area shape="rect" coords="...." href="URL" alt="" title="" />

Du coup, on ne peut pas mettre de contenu au milieu.

Solution 1 - Garder le Mapping et se contenter du CSS + HTML

Le mieux que tu puisses faire, c'est remplir les attributs alt et title qui sont parfois gérés comme des infobulles par les navigateurs si on laisse la souris dessus (je ne me rappelle plus, trop, mais il me semble qu'ils ont du mal à être d'accord sur ça ^^ ils affichent pas tous le même attribut, remplis les deux pour être tranquille). Par contre, tu ne peux mettre que du texte.

Solution 2 - Virer le Mapping, se contenter du CSS + HTML, mais à un niveau assez avancé

Après, si ton mapping est constitué d'images rectangulaires comme on le voit souvent dans les tutoriels, sache que tu peux découper tes images à part et les placer ensuite sur ton forum, placées au pixel près. Pour ça, il faut généralement une bonne maîtrise des positionnements en CSS (relative, absolute, etc), et de préférence un forum (ou un message d'accueil) de largeur fixe (sinon, bonjour les % et la galère ^^). L'avantage de pratiquer ainsi, c'est que tu es également libre de faire des effets de hover facilement, etc. Si tu es motivée, tu peux tenter de t'y mettre.

Solution 3 - Utiliser JavaScript pour faire les infobulles (marche pour tout, pas seulement pour le mapping)

Autrement, il y a la solution du JavaScript qui fera le :hover en lieu et place du CSS...
Il faudrait que tu mettes des écouteurs d'événements sur ton area. Les écouteurs écoutent (évidemment) ce qu'il se passe sur une balise HTML, pour voir si un évènement précis se produit, et agir en fonction de cet événement.
Ici, on utilisera onmouseover (quand le curseur de la souris est sur l'image), pour appeler la fonction JavaScript affiche qui sert à afficher l'infobulle, et onmouseout (quand le curseur est en dehors de l'image), pour appeler la fonction cache qui cache l'infobulle.
Après, il faut mettre la div qui contient ton infobulle à côté de la map (pas dedans), et lui donner un identifiant unique
.
Au niveau des fonctions dans les onmouse, il faut que tu leur donne en paramètre l'identifiant (id) de ton infobulle, pour que le Javascript retrouve correctement la bonne div à manipuler.
Voici ce que ça donne :

Code:

<map>
      <area shape="rect" coords="..." href="URL" alt="" title="" onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" />
</map>
<div id="moninfobulle1">Blabla</div>

Il est tout à fait possible de faire la même chose en remplaçant area par des p, des div, ou des liens :

Code:

<div onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" > Passez la souris ici !</div>
<div id="moninfobulle1">Blabla</div>

/!\ ATTENTION aux simples quotes et doubles quotes! Il ne faut pas faire de conflit, cela ne marcherait pas, par exemple :
Mauvais :
onmouseover="affiche("moninfobulle1")"
onmouseover='affiche('moninfobulle1')'
Et encore moins un mélange du genre :
onmouseover='affiche('moninfobulle1")"

Il n'y a que deux possibilités (en dehors de faire échapper le caractère)
onmouseover='affiche("moninfobulle1")'
onmouseover="affiche('moninfobulle1')"

Dans ton CSS, il faut attribuer à l'identifiant #moninfobulle1 la propriété display:none; pour ne pas que le bloc associé ne s'affiche au chargement de la page.

Pour finir, il te faut créer le script suivant (via les modules » gestion des pages javascripts de ton panneau d'administration)

Code:

function affiche(infobulle) {
  document.getElementById(infobulle).style.display='block';
}
function cache(infobulle){
  document.getElementById(infobulle).style.display='none';
}

Le javascript n'est pas très compliqué à comprendre. Entre les accolades d'une fonction, il va chercher dans le document (la page HTML) l'élément qui possède l'identifiant que tu as mis en paramètre lorsque tu as écrit les onmouse. Tout ceci pour modifier le style css, et plus précisément la propriété display, en lui donnant une nouvelle valeur, soit block, soit none selon la fonction.

Le JavaScript peut aussi servir d'alternative à ceux qui ont des soucis avec IE6 ou qui veulent absolument un lien pour créer leur infobulle.

Par contre, j'espère que ça va fonctionner, pas trop le temps de tester ^^

Voilà, bon courage ^^

Kiwi