Créer une infobulle Bouton_activeCréer une infobulle Bouton_hoverCréer une infobulle Fb-hoverCréer une infobulle Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Créer une infobulle EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Créer une infobulle EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Créer une infobulle EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Créer une infobulle EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Créer une infobulle EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Créer une infobulle EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Créer une infobulle EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Créer une infobulle EmptyVen 03 Fév 2023, 17:22 par Krager

-10%
Le deal à ne pas rater :
PC Portable Gamer ASUS TUF Gaming F15 | 15,6″ FHD IPS 144 Hz – ...
599.99 € 669.99 €
Voir le deal

Partagez
 

Créer une infobulle

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Kiwi
Kiwi
{ Membre }
{ Membre }

Féminin Messages : 142



Créer une infobulle Empty

Créer une infobulle


Informations générales

Description :
Ce tutoriel vous apprendra à créer une infobulle.
Il requiert quelques notions de HTML, mais également de CSS.

Démo :
Aucune démonstration disponible

Testé sur :
Firefox, Chrome, Internet Explorer

Crédits :
Proposé par Kiwi le 06/11/2010 | Validé par sNipe_sCk

Mise(s) à jour :
Mise à jour le 08/08/2012 par 'Christa Lostmindy

Le tutoriel


Introduction


Pourquoi ce tutoriel a-t-il remplacé celui de Lilypad ?:
Tout d'abord : Qu'est-ce qu'une infobulle ?
Une infobulle est une petite fenêtre qui apparaît lors du passage de votre souris sur du texte ou une image. Elle permet d'ajouter des informations complémentaires, et de gagner de la place.

La partie HTML, création de la base de l'infobulle.


Pour commencer, voici comment présenter du texte à l'intérieur d'un bloc HTML :
Code:
<div>
    TEXTE
</div>

La même chose avec une image :
Code:
<div>
    <img src="IMAGE" alt="nom de l'image" />
</div>

Ou encore avec un lien :
Code:
<div>
    <a href="LIEN">Cliquez ici</a>
</div>

Voire les trois ensemble :
Code:
<div>
    TEXTE
    <img src="IMAGE" alt="nom de l'image" />
    <a href="LIEN">Cliquez ici</a>
</div>

Ensuite nous allons attribuer à notre bloc ce que l'on appelle une classe avec l'aide de l'attribut class, ce qui nous permettra de donner un style CSS à nos éléments HTML, et par voie de conséquence de créer notre infobulle.

Dans ce tutoriel, notre classe s'appellera infobulle.

Voici donc votre code HTML avec cette classe en plus :

Code:
<!--Lorsque l'infobulle se fait sur du texte-->
<div class="infobulle">
    TEXTE
</div>

<!--Lorsque l'infobulle se fait sur une image-->
<div class="infobulle">
    <img src="IMAGE" alt="nom de l'image" />
</div>

<!--Lorsque l'infobulle se fait sur un lien-->
<div class="infobulle">
    <a href="LIEN">Cliquez ici</a>
</div>

Ensuite nous allons ajouter le contenu de notre infobulle à notre code.

Code:
<!--Lorsque l'infobulle se fait sur du texte-->
<div class="infobulle">
    TEXTE
    <div>CONTENU DE L'INFOBULLE</div>
</div>

<!--Lorsque l'infobulle se fait sur une image-->
<div class="infobulle">
    <img src="IMAGE" alt="nom de l'image" />
    <div>CONTENU DE L'INFOBULLE</div>
</div>

<!--Lorsque l'infobulle se fait sur un lien-->
<div class="infobulle">
    <a href="LIEN">Cliquez ici</a>
    <div>CONTENU DE L'INFOBULLE</div>
</div>
Vous pouvez constater qu'à l'intérieur du bloc de classe .infobulle ont été créés de nouveaux blocs qui vont à leur tour contenir toutes les informations de votre infobulle. Il est tout à fait possible d'y insérer des liens sans la moindre contrainte, comme ceci :

Code:
<!--Lorsque l'infobulle se fait sur du texte-->
<div class="infobulle">
    TEXTE
    <div>
              CONTENU DE L'INFOBULLE
              <a href="LIEN">Cliquez ici</a>
    </div>
</div>

<!--Lorsque l'infobulle se fait sur une image-->
<div class="infobulle">
    <img src="IMAGE" alt="nom de l'image" />
    <div>
              CONTENU DE L'INFOBULLE
              <a href="LIEN">Cliquez ici</a>
    </div>
</div>

<!--Lorsque l'infobulle se fait sur un lien-->
<div class="infobulle">
    <a href="LIEN">Cliquez ici</a>
    <div>
              CONTENU DE L'INFOBULLE
              <a href="LIEN">Cliquez ici</a>
    </div>
</div>

Notes :
Si vous souhaitez aller à la ligne, ajoutez la balise <br />.
Si vous souhaitez ajouter une image, ajoutez simplement <<img src="URL_IMAGE" alt="nom de l'image" />.

Nous avons donc notre base HTML et nous pouvons passer au CSS.

La partie CSS, mise en forme de l'infobulle


Nous allons donc nous retrouver désormais dans le Panneau d'Administration, onglet Affichage puis menu Images et couleurs » Couleurs et enfin dans l'onglet Feuille de style CSS. Vous allez écrire votre code CSS dans le champ de texte qui s'affiche.
Code:
div.infobulle {
  position: relative; /* on définit le bloc comme élément de référence */
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle > div{
  display: none; /* ceci masque l'infobulle */
}

div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div{
   display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

   /* on positionne notre infobulle par rapport au bloc conteneur */
   position: absolute;
   top: 5px; /* 5px par rapport au haut du bloc .infobulle */
   left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

   /* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
   background: #ebebeb; /* arrière-plan de l'infobulle */
   color: black; /* texte dans l'infobulle */
   padding: 3px; /* marges internes par rapport aux bords */
   /* bordures de votre infobulle*/
   border: 1px dotted black;
}
Vous pouvez bien entendu changer toutes les propriétés pour que votre infobulle soit personnalisée.
Enregistrez votre feuille de style. Normalement si vous avez bien suivi, votre infobulle devrait apparaître ! Smile

Dernier petit détail : cela n'est pas compatible sous Internet Explorer version 6 qui ne prend pas en compte les :hover sur autre chose que des liens Smile Mais tant pis pour ceux qui ne sont pas à jour, ça leur apprendra.
MessageSujet: Créer une infobulle   Créer une infobulle EmptySam 06 Nov 2010, 13:33
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Créer une infobulle Empty
FAQ



Q


R


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: Créer une infobulle   Créer une infobulle EmptyVen 09 Déc 2011, 17:30
Revenir en haut Aller en bas
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Créer une infobulle Empty
Tiens? Pourquoi tu utilises le > dans le CSS? Tu pourrais également ne pas le mettre, non? Ou ce ne serait pas conforme au w3?
MessageSujet: Re: Créer une infobulle   Créer une infobulle EmptyLun 08 Oct 2012, 16:33
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Créer une infobulle Empty
Si je me souviens bien, c'est moi qui ai mis un >. En fait, c'est pour pouvoir mettre d'autres div dans l'infobulle sans que ça pose de problèmes vu que le > permet de ne cibler que le div fils de .infobulle.
MessageSujet: Re: Créer une infobulle   Créer une infobulle EmptyLun 08 Oct 2012, 16:35
Revenir en haut Aller en bas
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Créer une infobulle Empty
Oh je vois. Bien sûr. C'est évident, maintenant que tu le dis ><
MessageSujet: Re: Créer une infobulle   Créer une infobulle EmptyLun 08 Oct 2012, 16:40
Revenir en haut Aller en bas
Contenu sponsorisé




Créer une infobulle Empty
MessageSujet: Re: Créer une infobulle   Créer une infobulle Empty
Revenir en haut Aller en bas
 

Créer une infobulle

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Créer une infobulle sur une image réactive
» Créer un Accordéon
» Créer un Accordéon Vertical
» Créer une lettrine
» Créer une PA réactive / mapping

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit | Informatique et Internet | Internet