Forum d'entraide
Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum d'entraide
Crea illusion Fantasy

Aides, Conseils, Forum, Sites web, blogs, tout supports, Graphismes, Tutoriels, Publicités.


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Infobulles

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 4986
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10528
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Infobulles Ven 15 Juin 2018 - 12:21
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>

Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Infobulles

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Mettre deux infobulles cote a cote.
» Mettre une opacité aux infobulles
» Infobulles sur onglet
» problème avec les infobulles
» Problème avec les infobulles

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum d'entraide
Crea illusion Fantasy
 :: Astuces codages pour forumactif :: Astuces et codages forumactif
-