Cln's Blog

Monsieur Truc est un vrai de vrai et toujours à l'heureau troisième top.......

---

Il s'agit d'une infobulle à taille fixe, dans laquelle on peut mettre texte ou image...

On ajoute, soit aux feuilles Css, soit en mode source (HTML) de l'article (<style type="text/css>...</style>) , ces lignes :

a.infobulle em {display:none;}

a.infobulle:hover { border: 0;position: relative;z-index: 500;text-decoration:none;}

a.infobulle:hover em { font-style: normal;display: block;position: absolute;top: 20px;left: -10px;padding: 5px;color: #000;border: 1px solid #bbb;background: #ffc;width:170px;}

Ces lignes disent :

- ce qui se trouvera entouré des balises <em> imbriqué dans une balise lien nommé "infobulle" ne se verra pas.
- au survol, ce lien "infobulle" sera au-dessus des autres, sans bordure ni soulignement.
- au survol, ce qui se trouvera entouré des balises <em> imbriqué dans la balise  "infobulle" sera un bloc de telle largeur, avec telle bordure, tel fond, telle couleur de texte et se trouvera à tant de pixel par rapport au lien d'origine.

Ensuite, on écrit normalement son texte. Juste à la suite du mot qui sert de lien, on écrit le mot de l'infobulle (ou on insère l'image, placement par défaut).
On passe en mode source, on entoure mot ou image de l'infobulle par les balises <em>....</em>.
Pour faire le lien, soit on l'écrit depuis le HTML, soit on surligne à la souris mot+mot infobulle (ou mot+image), on clique "ajouter un lien", dans l'onglet "lien externe", on met l'ur. de destination ou, pour aller nulle part, on écrit "#nogo".
Dans "options avancées", on choisit l'ouverture dans la même fenêtre et dans le champ "classe", on écrit infobulle.

La ligne d'exemple, là haut, s'écrit comme ceci en HTML :

<a class="infobulle" href="#nogo">
   Monsieur Truc
    <em>
      <img src="http://fdata.over-blog.com/99/00/00/01/img/new/admin/header/logo_ob_admin.png" width="155">
    </em>
</a>
 est un vrai de vrai et toujours &agrave;   l'
<a class="infobulle" href="http:///#nogo">
   heure
    <em>
      au troisi&egrave;me top...
    </em>
</a>
....