Message public

[Script] Script permettant de mettre des info-bulle personnalisées très jolies

    = Message =

    Voici un petit script que j'ai trouvé sur internet, et que je trouve très joli, alors pour le partager avec les membres d'OnLC, j'ai posté ce message.

    --> Si vous avez des commentaires, vous pouvez répondre dans la partie "répondre" de cette page de Support OnLC. <--

    = Le script =

    = Nécessaire =

    Pour pouvoir utiliser ce script, il faut d'abord activer l'option "Editeur de thème graphique", avec allopass. Quand c'est fait, lisez la suite.

    = Dans le head =

    Mettez dans votre feuillez de style css, dans l'éditeur de thème graphique, entre la balise "<style type="text/css>", dans le head ce code :

    a.tooltip em {
    display:none;
    }
    a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
    }
    a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: white;
    }
    a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(http://img49.xooimage.com/files/e/1/3/infobulletop00-ae97bc.gif);
    margin:0;
    padding: 0;
    border: 0;
    }

    Notez que vous pouvez changer la couleur du fond de l'infobulle en changeant, dans a.tooltip:hover em, la couleur de "background", qui est par défaut en blanc.

    Ensuite, enregistrez et fermez l'éditeur, puis aller dans "Rédaction du site".

    = Partie page web =

    Choisissez la page dans laquelle vous voulez mettre l'effet, et mettez ce code :

    <a href="ADRESSE_DE_DESTINATION_DU_LIEN" class="tooltip">TEXTE DU LIEN <em><span></span>Texte de l'infobulle (vous pouvez mettre en forme avec le html !)</em></a>

    Une fois fait, enregistrer la page, puis visualisez-là.

    Si tout fonctionne comme dans la capture d'écran disponible à la fin du message, c'est que l'installation à fonctionner.

    Vous pouvez ensuite refaire autant de lien que vous voulez ayant ce type d'infobulle très facile à personnaliser.

    CAPTURE D'ECRAN : http://img53.xooimage.com/files/f/5/6/capture_ecran-2741f55.png

    SOURCE : http://xooit.xooit.com/index.php

    Site : http://soluceetinfos.onlc.fr/


    Répondre

    Questions similaires :


    Marquer ce message comme résolu

    Envoyer un nouveau message sans rapport avec cette discussion

Newsletter OnlineCreation.me

Recevez par e-mail des astuces pour booster votre site internet.
Votre navigateur internet n'est pas à jour

Veuillez mettre votre navigateur internet à jour pour consulter de site dans de meilleures conditions. Update my browser now

×