Comment mettre un infobulle ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment mettre un infobulle ?

Message par Etoile de l'arc-en-ciel le Sam 6 Oct 2012 - 9:48

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 .


Dernière édition par Etoile de l'arc-en-ciel le Dim 7 Oct 2012 - 10:04, édité 2 fois

Etoile de l'arc-en-ciel
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 19/08/2012

http://thedarkalliance.forumactif.org/
Etoile de l'arc-en-ciel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre un infobulle ?

Message par FANCH 56 le Sam 6 Oct 2012 - 10:15

Bonjour

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


FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre un infobulle ?

Message par Etoile de l'arc-en-ciel le Sam 6 Oct 2012 - 16:02

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

Etoile de l'arc-en-ciel
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 19/08/2012

http://thedarkalliance.forumactif.org/
Etoile de l'arc-en-ciel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre un infobulle ?

Message par Witzz le Sam 6 Oct 2012 - 17:13

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... . Wink


Cordialement.

Witzz
*****

Masculin
Messages : 841
Inscrit(e) le : 30/06/2011

https://www.youtube.com/channel/UC9KGhFAG4gkDsxAnHURUQMg
Witzz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre un infobulle ?

Message par Etoile de l'arc-en-ciel le Dim 7 Oct 2012 - 9:22

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

Etoile de l'arc-en-ciel
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 19/08/2012

http://thedarkalliance.forumactif.org/
Etoile de l'arc-en-ciel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre un infobulle ?

Message par Law D kev le Dim 7 Oct 2012 - 10:03

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.

Law D kev
****

Messages : 255
Inscrit(e) le : 11/07/2012

http://forum.forumactif.com
Law D kev a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment mettre un infobulle ?

Message par Etoile de l'arc-en-ciel le Dim 7 Oct 2012 - 10:04

Merci

Etoile de l'arc-en-ciel
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 19/08/2012

http://thedarkalliance.forumactif.org/
Etoile de l'arc-en-ciel a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum