Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Html & CSS] Système d'infobulle

    Partagez
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Lun 6 Juin 2011 - 17:14
    Rappel du premier message :


    Tutoriel: Système d'infobulle
    Html & CSS
    Niveau: Facile
    Exemple: Clik'
    Compatibilité: Firefox - Chrome - Opera - Safari(?) - IE (?)







    Oyé Oyé!!!
    Voici une astuce bien connu maintenant mais qui revient souvent comme question au sein du forum, de plus aucun tutoriel n'a été poster dessus si j'ai bien regarder ^^", donc le voila ce petit tutoriel sur le système d'infobulle.

    L'infobulle permet de conserver une partie de texte/image ou autre dans une "bulle", celle-ci apparaît quand on passe la souris sur une image ou bien un texte, ici je vous expliquerait le système par image (voir exemple plus haut), beaucoup on utilisé le système par texte/lien mais il reste déconseiller.

    Le principe reste donc simple, il vous suffit de mettre une image dans votre page d'accueil (l'infobulle étant souvent utilisé dans cet partie) comme ceci:

    Code:
    <img src="Adresse de l'image">

    Bref rien de bien compliquer maintenant on va placer le texte ou l'image qui apparaîtra quand on survolera la première image:

    Code:
    <img src="Adresse de l'image"><span> Texte dans l'infobulle</span>

    Et vient ensuite la division qui encadrera le tout pour que l'infobulle fonctionne correctement avec le css qui suit mais qu'on verra après x).

    Code:
    <div class="infobulle"><img src="Adresse de l'image"><span> Texte dans l'infobulle</span></div>

    La partie html est terminer on va donc passer à la seconde partie qui est tout aussi importante, le CSS.

    Dirigez-vous dans votre panneau d'administration vers Affichage -> Couleur -> Onglet | Feuille de style CSS, et commencer par coller le premier morceau de code qui consistera à cacher l'infobulle quand la souris ne passe pas sur l'image:

    Code:
    .infobulle span
    {                       
        position : absolute;
        top : auto;
        left : auto;
        width : 136px;
        height : 136px;
        background-color: #9C7049;
        display : none;
    }

    position: absolue -> Permet de positionner l'infobulle par rapport au coin en haut à gauche.
    top -> Position par rapport au haut
    left -> Position par rapport à gauche
    width -> Largeur de l'infobulle
    height -> hauteur de l'infobulle
    overflow -> hidden -> l'infobulle sera cacher si elle dépasser la heuteur et la largeur définie par height et width,

    L'hauteur et la largeur est petite étant donner qu'on ne veut pas voir apparaître l'infobulle sans qu'on passe la souris, donc cette partie n'est pas à modifier.
    Maintenant on passe au dernier bout de code CSS qui fera apparaitre l'infobulle:

    Code:
    .infobulle:hover span{
        display:block;
        top        :  auto;
        left      :  auto;
        width      :  136px;
        height    : 136px;
        overflow  :  visible;
        background-color: #9C7049;
    }

    Les quatre premières valeur signifie la même chose qu'au premier mais il faudra les modifier pour positionner l'infobulle et lui donner une hauteur et une largeur.
    overflow: visible -> Comme c'est marquer l'élément sera visible au passage de la souris.
    background-color -> C'est la couleur de fond de l'infobulle tout simplement.

    Penser à tout bien valider et vous avez votre infobulle, je vous laisse au passage cet petite page -> Ici qui contient la plupart des propriété css sa peut toujours servir quand on à un trou de mémoire (fin moi sa m'aide bien x).








    Dernière édition par Sui' le Ven 17 Juin 2011 - 12:27, édité 1 fois


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 22Message(s) : 44
    Jabberwock Elyra
    le Sam 22 Sep 2012 - 8:13
    Hellow Wink

    Tuto fort sympa mais ne correspond pas à ton exemple, car moi j'ai les infos ( profil MP) en dessous de l'avatar et non sur le coté >_<

    MasculinAge : 27Message(s) : 194
    Hayate747
    le Dim 7 Oct 2012 - 15:58
    Merci !! Wink
    FémininAge : 20Message(s) : 57
    xGalope
    le Lun 21 Jan 2013 - 10:56
    Merci beaucoup *_*


    FémininAge : 24Message(s) : 86
    la-loca
    le Lun 27 Mai 2013 - 0:17
    Merci beaucoup pour l'astuce!
    J'ai du mal à chaque fois à les installer par le biais des javascripts etc...

    :bisou:


    FémininAge : 18Message(s) : 134

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ema Skye
    le Dim 14 Juil 2013 - 14:45
    Bonjour ! ^0^ Merci pour le partage ! Mais j'ai un petit problème ! :3
    J'ai copié/collé trois fois la div infobulle, pour avoir trois images. Mais le problème, c'est qu'elles s'alignent de bas en haut, et non côte à côte... Comment y remédier ? :3
    FémininAge : 19Message(s) : 35
    Katil
    le Dim 14 Juil 2013 - 14:55
    MErci, ça marche super bien
    FémininAge : 23Message(s) : 189

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    HeleneM
    le Mar 12 Nov 2013 - 20:21
    Merci pour les explications =)


    "La normalité n'existe pas, la différence est la voie de la raison"

    Mais j'hésite avec
    FémininAge : 18Message(s) : 134

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ema Skye
    le Dim 15 Déc 2013 - 21:14
    Merci du tuto Suii' ! :3
    Contenu sponsorisé
    Aujourd'hui à 12:38

      La date/heure actuelle est Sam 3 Déc 2016 - 12:38