Hello,

voici un petit tutorial pour ajouter les bulles sur les catégories.
Si tu n'es ni en mode expert, ni sur Canalblog, passe le chemin...

Sur chaque page (j'ai fait les modifications seulement sur la page d'accueil, la page des archives, la page d'un message, la page du profil d'un auteur), il faut ajouter ceci , <div id="bulle"></div> juste après le Tag Body.
Chez moi cela donne ça :

<body>
<div id="bulle"></div>
... la suite de mon code

Ce petit code est la bulle en elle même.

Ça c'est facile !
Ensuite, sur toutes ces pages, tu dois avoir dans ton code un truc du genre :

  <CBCategories>
  <li><a href="<$BlogCategoryURL"><$BlogCategoryName$></a></li>
  </CBCategories>

il faut faut modifier le code pour que cela ressemble a cela (en gras ce qui est ajoute) :

  <CBCategories>
  <li><a href="<$BlogCategoryURL$>" onMouseOver="affiche('','<$BlogCategoryDescription$>')" onMouseOut="affiche('cache')"><$BlogCategoryName$></a></li>
  </CBCategories>

C'est bon tu suis ? Ces deux methodes permettent d'afficher ou de cacher la bulle au moment ou la souris passe au dessus du texte.

Dans chaque page, tu copies le code suivant, il faut qu'il soit avant le </head>

<script>
function getMouseCoord(e,type) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY){
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }

    if(type == 'x' ) return posx;
    if( type == 'y' ) return posy;
}

function affiche(action,contenu){
    var voir;

    if (action == "cache"){
        voir = "hidden";
        contenu = "";
    }
    else {
        voir = "visible";
    }
   
    document.getElementById("bulle").innerHTML = contenu;
   
    function init() {
        document.onmousemove=mousemove;
    }
   
    function mousemove(e) {
        var DocRef;
        Mouse_X = getMouseCoord(e,'x');
        Mouse_Y = getMouseCoord(e,'y');

        var Obj =  document.getElementById("bulle");

        with (Obj){
            if (voir == "visible") {
                style.top  = Mouse_Y +20 +"px";
                style.left = ( Mouse_X  ) +"px";
            } else {
                style.top  = 0 +"px";
                style.left = 0 +"px";
            }
            style.visibility = voir;
        }
    }

    init();
}
</script>

Personnellement, j'ai préféré le mettre dans un fichier à part et ensuite appelé ce fichier, pour éviter de répliquer le code, mais c'est plus compliqué à expliquer.

Enfin il faut modifier la feuille de style générale.
il suffit d'ajouter le code suivant à la fin par exemple :

#bulle {
    background-color: #D7E4f2;
    display: block;
        position: absolute;
        font-family: verdana;
        font-size: 10px;
        color: #0F4D82;
        border: dashed 1px #0E4776;
        max-width: 175px;
        text-align: center;
        padding: 5px;
        visibility: hidden;
        z-index: 1000;
}

Donc je vais expliquer vite fait sinon tu auras les mêmes couleurs que moi...
    background-color: #D7E4f2; => couleur de fond de la bulle
        font-family: verdana; => police écriture
        font-size: 10px; => taille de l'écriture
        color: #0F4D82; => couleur de l'écriture
        border dashed 1px #0E4776; => description de la bordure
            dashed : pointillé
            1 px : épaisseur 
            #0E4776; couleur
Les autres valeurs ne sont pas à modifier.

Pour connaître le code des couleurs, je te conseille les sites :

ou en cherchant "Couleur Hexadécimale" sur google...

voila voila !
J'espère avoir été claire !

Et n'hésite pas à me dire si tu t'en es servi !

EDIT de 10 h 00 : Webconfig a fait des bêtises, il a doublé tous les mots qu'il ne connaissait pas
Comme c'est du code, il y en avait pas mal.
Donc, j'ai tout réécrit l'article ce matin.
J'ai fait un petit test sur la page des archives et tu peux vérifier cela marche bien !

Lutine