Cr�er son site Gratuitement : Service / Outils webmaster gratuit
Mon Site Gratuit
Contactez nous
Nos partenaires
Scripts
Tutoriaux
Nos services
Forums
Accueil
InfoBulle PNG (Code Html&Css!)InfoBulle PNG (Code Html&Css!)
 
InfoBulle PNG (Code Html&Css!)

HTML | InfoBulle PNG (Code Html&Css!)

Script crée par boulledogue le 31-05-2008.

SocialTwist Tell-a-Friend

Ce code html&css vous permettra d'afficher sur votre site une bulle d'information lorsque la souris du visiteur passera sur un lien! Très pratique!

Bonjour tout le monde,
Je vais vous apprendre comment faire une infobulle limitée pour 130 caractères!

Résultat final:

http://desopilo.olympe-network.com/infobulle/

Notre infobulle!

Compatibilités:

IE7, IE8, FireFox 2, Safari & Opera

Incompatibilité:

FireFox 3

L'infobulle

http://desopilo.o-n.fr/infobulle/bulleinfo.png
http://desopilo.o-n.fr/infobulle/bulleinfo.png

Code HTML


Code :
<a href="http://monsitegratuit.com" class="info">MonSiteGratuit.com
<span>130 caractères pour dire que MonSiteGratuit est formidable!</span></a>



Code 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 {
background-image:url(images/bgInfo.png);
}

a.info:hover span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://desopilo.o-n.fr/infobulle/bulleinfo.png",
sizingMethod="crop");
}

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:#999999;
text-decoration:none;
text-align:justify;
}




Résultat final:

http://desopilo.olympe-network.com/infobulle/

J'espère vous avoir aidé!
A bientot
Boulledogue


Poster un commentaire

Commentaire :

*Vous devez être connecté pour pouvoir poster un commentaire
Si vous n'êtes toujours pas inscrit, cliquez ici !

Commentaires

esce-que quelq'un aurais le code html merci

tomm

Super Merci.
Comme ça sa sera plus facil pour moi ;)

MWRonaldo

Ca doit être sympa :) Mais toutes les images hébergées sont hors ligne ... =/

Flow57

Oué j'essayer mais moi ça donne rien j'utilise mozilla

mais c'est pas mal bravo

Valbuena72

Oui non compatible avec Firefox, essaye avec internet ça marche

BlooZ

ça marche po dommage

Valbuena72

Comme l'on souligné la plupart des posteurs sur ce topic.
Il manque juste l'incompatibilité avec FF3 & OP9.5.
Sinon niveau esthétique y'a rien à dire.

Anonymous

Soumettre un script HTML

*Vous devez être connecté pour pouvoir soumettre un script
Si vous n'êtes toujours pas inscrit, cliquez ici !