Tout Sur l'Informatique & Blabla -TSI


AccueilAccueil  PortailPortail  Partenaires  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Navigation
Derniers sujets
» Présentation et recherche
Jeu 19 Mar - 2:23 par Error

» Error, pour vous servir !
Jeu 5 Mar - 0:35 par Error

» Call of Duty
Ven 24 Oct - 3:06 par DarkVatorica

» [Html] Les codes pour donner des effets sur le texte
Sam 21 Juin - 13:29 par Dada

» Présentation de Dada
Sam 21 Juin - 13:27 par Dada

» Rot68
Mar 3 Déc - 9:39 par Rot68

Qui est en ligne ?
Il y a en tout 2 utilisateurs en ligne :: 0 Enregistré, 0 Invisible et 2 Invités :: 1 Moteur de recherche

Aucun

Le record du nombre d'utilisateurs en ligne est de 48 le Mer 11 Sep - 21:35

Sujet : « [Css + Html] Mettre une infobulle »

Rafraichir
 Kernelov Voir le profil de l'utilisateur Ven 28 Aoû - 22:47
Un petit code pour mettre des infobulles sur son forum Smile

droite Tous d'abord vous devez mettre le code suivant dans votre css :
Code:
 a.info { position:relative; background:none; z-index:10; }
a.info:hover { z-index:20; }
a.info span { display:none; }
a.info:hover span { display:block; position:absolute; top:18px; left:10px; padding-left:25px; padding-top:24px; padding-bottom:5px; padding-right:8px; width:205px; height:45px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:italic; font-size:10px; color:#000000; text-decoration:none; text-align:justify; }
a.info:hover>span { background-image:url(http://i34.servimg.com/u/f34/11/14/60/21/bginfo10.png); }
a.info:hover span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://i34.servimg.com/u/f34/11/14/60/21/bginfo10.png", sizingMethod="crop"); }

droite Enregistrez le, maintenant vous pouvez mettre une infobulle partout sur votre site ou furm en insérant ce code html :
Code:
 <a href="le lien" class="info">le texte
<span>la description</span></a>

droite Remplacez "le texte" par le texte à mettre en surbrillance, c'est à dire celui qu'on doit survoler avec la souris pour que l'info bulle s'affiche.

droite Remplacez "la description" par le texte à insérer dans l'info bulle

Voici un test :
le texte
la description

Ces codes sont 100% personnalisable si vous connaissez les base du css, sinon n'hésitez pas à poser vos questions sur ce topic Smile


Dernière édition par AIsTerMas le Ven 28 Aoû - 22:55, édité 1 fois
Sujet : « [Css + Html] Mettre une infobulle »