Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Points de Lutin
10 juin 2008

Les bulles

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

Publicité
Publicité
Commentaires
L
:P J'aime bien ce tuto, je pense que je vais m'en servir...très bientôt. Grazie mille A+
Répondre
N
coucou:), merci à toi, mon blog est un ramassi :Pde trucs et astuces que j'applique sur toutes les pages.... mon mot préféré est TROP:O alors tes bulles m'ont séduite.. je vais essayer:P;)<br /> nel
Répondre
M
:'(<br /> J'aurai aimé utiliser tes bulles mais je suis beaucoup trop étanche pour ça!!!!!!!!!!!!!!!bises<br /> Merci pour ton com. chez moi
Répondre
E
Sont sympa les emoticones.<br /> C'est de toi ou de canalblog ?:)
Répondre
E
Merci <br /> Bon, quand j'aurai la tête plus libre je me pencherai dessus. ;)
Répondre
Points de Lutin
Publicité
Suivez-moi !
Abonnez vous à la newsletter
212 abonnés
Flux RSS
Publicité