Forum Crea illusion Fantasy
Infobulles Bannie10

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 Crea illusion Fantasy

#Forum d'entraide, une inscription pour nous rejoindre. Les débutants sont les bienvenu aussi :)


 

Partagez

Infobulles

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 4717
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 83179
Fondatrice
Ptite_Perle
MessageSujet: Infobulles Infobulles EmptyVen 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

Infobulles

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

Sujets similaires

-
» Problème avec les infobulles
» Apparition des infobulles en cliquant sur l'image
» Infobulles multiples
» Infobulles qui se chevauchent
» Ajout de groupes avec infobulles à mon qeel

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