Comment mettre un infobulle ?

[Etoile de l'arc-en-ciel]

Je voudrais mettre un infobull . Sur mon forum , mais je n'y comprend rien du tout . Voici le lien de mon forum :http://warriors-cats.forumcanada.org/
Pouvez-vous m'aider ?
Merci d'avance .

[FANCH 56]

Bonjour

Tu tapes infobulle dans le champ rechercher, tu auras toutes les réponses.

[Etoile de l'arc-en-ciel]

J'ai regardé mais j'ai toujours pas compris .

[Witzz]

Bonjour.
Je vous présente un code pour créer une infobulle de base:

Code CSS:

Code:

        a.info {
        position:relative;
        z-index:24;
        color:#000000;
        text-decoration:none
        }
       
        a.info:hover {
        z-index:25;
        background-color:#FFFFFF
        }
       
        a.info span {
        display: none
        }
       
        a.info:hover span {
        display:block;
        position:absolute;
        top:2em;
        left:2em;
        width:15em;
        border:1px solid #000000;
        background-color:#FFFFFF;
        color:#000000;
        font-weight:none;
        padding:5px;
        }

Code html:

Code:


<a href="#" style="text-decoration:none;" class="info"><img src="ADRESSE DE L'IMAGE" alt="Texte alternatif" /><span> Texte à afficher dans l'infobulle </span></a>

J'explique:

Dans le CSS, le :
Background-color représente la couleur de fond (vous pouvez la régler avec les code couleurs html comme #000000 qui sera noire
Border qui sera les bordures de votre cadre idem, vous pouvez régler la couleur et l’épaisseur
Color sera la couleur de l'écriture

Vous pouvez aussi personnaliser le code en mettant une ombre:

Code:

box-shadow: 1px 1px 6px #Code couleur;

Vous amuser à faire des coins légèrement arrondis:

Code:

        border-radius: 3px;

Où placer ces deux codes?

Après le padding: 5px; de ce code:

Code:

a.info:hover span {
        display:block;
        position:absolute;
        top:2em;
        left:2em;
        width:15em;
        border:1px solid #000000;
        background-color:#FFFFFF;
        color:#000000;
        font-weight:none;
        padding:5px;
        }

Voilà, vous pouvez aussi vous renseigner sur des sites de codages comme le Site du Zéro ou autre... .


Cordialement.

[Etoile de l'arc-en-ciel]

J'ai compris . Mais j'ai une question on met ou le code html ?

[Law D kev]

PA >> Modules >> HTML & JAVASCRIPT >> Gestion des pages HTML >> Créer un nouvelle page HTML puis vous insérez votre code HTML puis vous faites "Valider".

Cordialement.

[Etoile de l'arc-en-ciel]

Merci