C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

Créer une infobulle

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 142



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   Sam 06 Nov 2010, 13:33
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



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


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Créer une infobulle   Ven 09 Déc 2011, 17:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lower-theory.teamconvention.com/index.htm
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



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   Lun 08 Oct 2012, 16:33
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



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.



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Créer une infobulle   Lun 08 Oct 2012, 16:35
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lower-theory.teamconvention.com/index.htm
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



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




MessageSujet: Re: Créer une infobulle   
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

-
» Affichier une infobulle au pointage d'un contrôle
» Zorg infobulle
» Codes pour infobulle
» Créer une infobulle sur une image de titre
» Problème de Tableau avec infobulle

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