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

    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
    FémininAge : 20Message(s) : 250
    Aki'
    le Mar 7 Juin 2011 - 11:21
    Oh **

    Merci, je vais le tester pour ma prochaine PA
    FémininAge : 21Message(s) : 45
    Little Pon
    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 ?


    MasculinAge : 24Message(s) : 1865
    Sui'
    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
    FémininAge : 21Message(s) : 45
    Little Pon
    le Ven 17 Juin 2011 - 11:59
    Exactement ! Je ne sais pas trop où mettre le code.


    MasculinAge : 30Message(s) : 441
    Inikaam
    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...
    MasculinAge : 24Message(s) : 1865
    Sui'
    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
    FémininAge : 21Message(s) : 45
    Little Pon
    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 ! (;


    FémininAge : 26Message(s) : 2
    Nawell
    le Ven 1 Juil 2011 - 16:18
    Est que c'est possible de positionner l'infobulle à droite de l'image ?
    MasculinAge : 20Message(s) : 224
    Magiquest
    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 !
    MasculinAge : 27Message(s) : 57
    Baal
    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
    MasculinAge : 20Message(s) : 1719

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    Soul
    le Sam 23 Juil 2011 - 23:44
    C'est tout con mais ça sert ! Merci Sui' !
    MasculinAge : 24Message(s) : 13
    Ectra
    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é ^^
    MasculinAge : 30Message(s) : 441
    Inikaam
    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...
    MasculinAge : 24Message(s) : 13
    Ectra
    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.
    MasculinAge : 26Message(s) : 222
    Fame
    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
    FémininAge : 21Message(s) : 22
    Taloula220
    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 ?
    FémininAge : 28Message(s) : 71
    Kabrina Lestrange
    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! ^^
    FémininAge : 24Message(s) : 11
    Natia
    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 !
    MasculinAge : 21Message(s) : 59
    Wos
    le Dim 6 Nov 2011 - 18:00
    Merci ^^


    MasculinAge : 23Message(s) : 140
    Sasu'X74
    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 " . )


    FémininAge : 36Message(s) : 26
    Kababs
    le Dim 11 Déc 2011 - 22:58
    Merci beaucoup pour ton tuto, il est simple et vraiment bien fait!
    FémininAge : 30Message(s) : 367
    Kahlan
    le Mer 21 Déc 2011 - 18:51
    Merci beaucoup !!!
    MasculinAge : 27Message(s) : 268
    Skunk
    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


    FémininAge : 21Message(s) : 28
    Granola
    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é
    Aujourd'hui à 3:26

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