Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5857 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120037 Infobulles | | Coucou Voici un code pour réaliser une infobulles. Le code Html à installer ou vous le souhaitez, vous pouvez aussi enlevez le code img scr si vous souhaitez pas d'images. - Code:
-
<div class="infobulle"><img src="lien image ou apparait l'infobulle"> <span>Contenu de la bulle</span></div> Le code pour votre CSS - Code:
-
.infobulle{position: relative;z-index: 0;} .infobulle:hover{background-color: transparent;z-index: 50;} .infobulle span{ position: absolute; background-color: #cff2ff; padding: 5px; left: -1000px; visibility: hidden; color: #000000;} .infobulle span img{ border: 1px; padding: 5px;} .infobulle:hover span{ visibility: visible; top: 40px; left: 35px; width: 150px ; color:#000000; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;} Si vous souhaitez plusieurs infobulles à la suite, installe un tableau à vous de voir si voulez les images, sinon supprimé les codes pour images. - Code:
-
<table><tr><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 1"> <span>Contenu de la bulle 1</span></div><div class="infobulle"><img src="lien image ou apparait l'infobulle 2"> <span>Contenu de la bulle 2</span></div></td><td></td><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 3"> <span>Contenu de la bulle 3</span></div></td></tr></table> |
| |