AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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
    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Lun 6 Juin 2011 - 17:14


    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
    avatar
    Aki'
    FémininAge : 20Messages : 250

    le Mar 7 Juin 2011 - 11:21

    Oh **

    Merci, je vais le tester pour ma prochaine PA
    avatar
    Little Pon
    FémininAge : 21Messages : 45

    le Ven 17 Juin 2011 - 11:01

    Salut !

    J'aime bien ce tuto, les info-bulles c'est vraiment pratique.

    Mais j'ai une question, enfin une demande en même temps. J'ai bien vu sur quelques forums que le profil des membres était mis en info-bulle, on peut voir le reste au passage de la souris sur l'avatar. Est-ce le même code qu'il faut utiliser ou faut-il changer quelque chose dans les templates ?



    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Ven 17 Juin 2011 - 11:51

    C'est le même système utilisé pour les profil et il faudra bien entendu toucher au template pour placer le code html, il te faudra repéré le bout de code concernant les info de profil dans le template correspondant.

    Ta question reste un peu vague tu désire l'utiliser pour les profils mais tu ne sais pas ou mettre le code?



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Little Pon
    FémininAge : 21Messages : 45

    le Ven 17 Juin 2011 - 11:59

    Exactement ! Je ne sais pas trop où mettre le code.



    avatar
    Inikaam
    MasculinAge : 30Messages : 441

    le Ven 17 Juin 2011 - 12:23

    salut, je me permets de corriger une erreur dans ton code

    overflow ne gère pas la visibilité de ton élément mais la façon dont il gère le surplus de contenu par rapport à sa taille. il peut avoir les valeurs hidden, visible, scroll et auto. ce qui fait que ton code "fonctionne" c'est que tu mets ton élément en dehors de l'écran normal (ce qui peut te donner des surprises sur certains navigateurs).

    voici comment reprendre ton idée et la rendre plus "propre". La partie HTML étant bonne, je la laisse intacte ^^

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

    .infobulle:hover span
    {
        display:block;
    }


    display gère le type de balise. il peut être inline (comme les span), block (comme les div) ou none (non affiché). comme span est de type inline, on le configure en block pour qu'il apparaisse en dehors de sa ligne classique, car le laisser en inline le superposerai au texte existant de façon pas toujours très jolie. les deux fonctionnent, à la limite ^^, à toi de voir le plus pratique






    Je suis l'être sombre qui contera votre chute...
    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Ven 17 Juin 2011 - 12:24

    Alors il te faut allez dans le template viewtopic_body et repéré ce bout de code:

    Code:
    <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->

    Il concerne les infos de profil, une fois trouver tu n'as plus qu'à appliquer le tutoriel c'est à dire que tu encadre le code ci-dessus de la balise "span" ce qui te donne ça:

    Code:
    <span><!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field --></span>

    Maintenant il manque plus que la division pour le passage de la souris (dans le tutoriel j'utilise une image mais la on va utiliser le texte "profil")

    Code:
    <div class="infoprofil"> PROFIL <span><!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field --></span></div>

    Et le css:

    Code:
    .infoprofil span
    {                         
        position      :  absolute;
        top            :  -2000em;
        left          :  -2000em;
        width          :  1px;
        height        :  1px;
        overflow      :  hidden;
    }

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

    Et voila normalement sa devrais marcher j'ai pas tester par contre ^^".
    Je précise que j'ai changer le nom de la class au ca sou tu aurais déjà utiliser le système d'infobulle ailleurs, j'ai remplacer le nom "infobulle" par "infoprofil" :o.

    N'hésite pas si tu as des problèmes ou des questions Wink.

    Edit: Merci de ta correction Inikaam et de tes explication sa m'est plus clair maintenant Wink, j'ai corriger le code.


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



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Little Pon
    FémininAge : 21Messages : 45

    le Ven 17 Juin 2011 - 12:29

    Merci Sui' ! Je vais le tester. (:

    Maintenant que j'ai la permission je vais t’embêter avec mes questions ! (;



    Nawell
    FémininAge : 26Messages : 2

    le Ven 1 Juil 2011 - 16:18

    Est que c'est possible de positionner l'infobulle à droite de l'image ?
    avatar
    Magiquest
    MasculinAge : 21Messages : 224

    le Sam 2 Juil 2011 - 0:18

    Raaaaah !
    C'était supossé être mon prochain Tuto Sad !
    Tu me fais mal au coeur :'( !
    Sinon, c'est très utile ^^ !
    Plusieurs personnes ignoraient comme faire alors que c'est très courant de nos jours ^^ !



    Faut jamais dire que les autres sont des crétins car t'en un petit crétin, parce que tu lis ce message crétin O.o !
    Baal
    MasculinAge : 28Messages : 57

    le Mer 13 Juil 2011 - 1:22

    J'ai toute essayé, 3 fois et 3 fois ça ne fonctionne pas >.<
    J'aimerais simplement introduite mon staff en infobulle dans mon tableau existant et je n'y arrive pas Sad

    Quelqu'un peut m'aider svp ? Razz
    avatar
    Soul
    MasculinAge : 21Messages : 1723

    le Sam 23 Juil 2011 - 23:44

    C'est tout con mais ça sert ! Merci Sui' !
    avatar
    Ectra
    MasculinAge : 25Messages : 17

    le Mer 27 Juil 2011 - 14:35

    Alors merci pour ce tuto (même si je connaissais déjà le principe..) mais j'ai une question..

    L'infobulle devient courante sur les forums mais elles restent affichées une fois le curseur placé dessus (j'entend, on affiche l'infobulle en plaçant son curseur sur l'image par exemple, mais si on place le curseur sur l'infobulle elle même ensuite, elle s'affiche, utile donc si dans l'infobulle on place un lieu ou autre.)
    Quelqu'un aurait-il une solution à ceci? Peut être que c'est tout bête hein, mais j'ai pas trouvé ^^
    avatar
    Inikaam
    MasculinAge : 30Messages : 441

    le Jeu 28 Juil 2011 - 14:13

    rajoute le même code avec cet en-tête

    Code:
    .infobulle span:hover{code;}

    en principe ça devrait le conserver ouvert lorsque tu es dessus. à tester




    Je suis l'être sombre qui contera votre chute...
    avatar
    Ectra
    MasculinAge : 25Messages : 17

    le Jeu 28 Juil 2011 - 14:22

    En fait c'était mon code qui était mal foutu.. Mais merci quand même, si tu m'avais pas dit j'aurais pas vérifié tout =)
    Du coup ça marche, chui content! =D

    Edit: J'ai quand même toujours un problème. Mon infobulle s'affiche quand je passe sur l'image, oui, mais aussi sur tout le reste de la ligne XD J'ai tenté de définir une taille à la div mais sans succès.
    avatar
    Fame
    MasculinAge : 27Messages : 224

    le Ven 12 Aoû 2011 - 22:06

    je suis trop content depuis le temps que jattends de pouvoir réussir a faire ça merci beaucoup Very Happy
    avatar
    Taloula220
    FémininAge : 21Messages : 22

    le Dim 14 Aoû 2011 - 18:11

    Moi j'ai un petit problème avec mes infobulles.

    J'ai utilisé ton code pour faire le staff dans ma PA sauf que quand je veux dévoiler ce qu'il y a dans l'infobulle, ça me superpose les infobulles des autres membres du staff. Comment je peux régler ce problème ?
    avatar
    Kabrina Lestrange
    FémininAge : 28Messages : 71

    le Dim 14 Aoû 2011 - 23:18

    J'ai une petite question, est-ce que c'est possible de faire un infobulle du genre en étant un membre et non un admin (donc sans toucher au CSS)

    Merci d'avance! ^^
    avatar
    Natia
    FémininAge : 25Messages : 11

    le Mer 26 Oct 2011 - 14:28

    Je commence enfin à apprendre les mystères des codes ! XD
    En tout cas merci à toi, cela à été super simple pour une pas douée de mon genre à comprendre !
    avatar
    Wos
    MasculinAge : 21Messages : 59

    le Dim 6 Nov 2011 - 18:00

    Merci ^^



    avatar
    Sasu'X74
    MasculinAge : 23Messages : 141

    le Jeu 17 Nov 2011 - 21:04

    Merci Wink. ( Wos pour te répondre au MP vu que je peut pas te répondre c'est un " Oui " . )



    avatar
    Kababs
    FémininAge : 36Messages : 27

    le Dim 11 Déc 2011 - 22:58

    Merci beaucoup pour ton tuto, il est simple et vraiment bien fait!
    avatar
    Kahlan
    FémininAge : 30Messages : 368

    le Mer 21 Déc 2011 - 18:51

    Merci beaucoup !!!
    avatar
    Skunk
    MasculinAge : 27Messages : 268

    le Jeu 9 Fév 2012 - 19:18

    Tout comme certaine personne j'ai un problème, j'ai beau trifouiller le code j'arrive pas à placer plusieurs image à la suite qui permettrais à chaqu'une d'elle d'avoir une info bulle. A la place sa m'affiche une seul image et me fait rentré les autres dans son info bulle. Comme puis je y remédier ? Merci d'avance



    avatar
    Granola
    FémininAge : 22Messages : 28

    le Mer 22 Fév 2012 - 18:21

    Merci beaucoup! Je cherchai justement ce genre de tutos.
    En revanche, j'ai quelques légers petits problèmes. Une infobulle avec une image dedans, pas de problème. C'est lorsque je veux rajouter une infobulle différente, avec une différente image qui pose problème. La même image se pose sur les deux infosbulles, alors que j'en veux deux différentes. Je ne sais pas si tu vois ce que je veux dire...Comment faire en sorte sur le css ou html pour que l'image ne soit pas présente sur toutes les infosbulles?

    Merci d'avance!



    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Mar 2017 - 14:57