[Css + Html] Mettre une infobulle

Navigation

TSI

Index du forum

Le forum

Windows, Linux, logiciels...

Zone graphique

Jeux vidéos

Les consoles portables

Zone test

Partenaires

Partenaires de TSI

Derniers sujets

» bonne annee 2010

Hier à 16:20 par jitus

» TSI - Forum devient AllForum.

Ven 9 Juil - 22:07 par nWo_legende

» [Tuto] [Photofiltre studio] Bien installer les plugins 8bf pour bien s'en servir

Lun 24 Mai - 0:19 par The-stunter974

» Le BlaBla du forum du BlaBla

Dim 9 Mai - 19:55 par Nolifisme

» [HS]Blog de shi no numa

Dim 18 Avr - 21:30 par nWo_legende

» presentation de karine

Dim 18 Avr - 16:35 par jitus

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

[ Voir toute la liste ]

Le record du nombre d'utilisateurs en ligne est de 29 le Sam 10 Juil - 21:25

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

Tout Sur l'Informatique & Blabla -TSI :: Informatique & Support :: Scripts pour votre site ou forumactif :: Le css

Kernelov

Ven 28 Aoû - 23:47

Un petit code pour mettre des infobulles sur son forum Smile

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"); }

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>

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û - 23:55, édité 1 fois

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

Tout Sur l'Informatique & Blabla -TSI :: Informatique & Support :: Scripts pour votre site ou forumactif :: Le css