Accueil
Portail
Insérer une infobulle sur une image
Page 1 sur 1•Partagez
- Splash
StaffAdmin 
MP- Zoom
- Code:
<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>- Code:
.infobulle{position: relative;z-index: 0;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
background-color: darkseagreen; /*couleur de fond de la bulle*/
padding: 5px;
top: -1000px; /*apparition de la bulle*/
visibility: hidden;
color: #eee;}
.infobulle span img{
border: 1px;
padding: 5px;}
.infobulle:hover span{
visibility: visible;
top: 110px; /*position par rapport au haut de l'image*/
left: -5px; /*position par rapport au bord gauche de l'image*/
width: 120px; /*largeur de la bulle*/
text-align: center; /*centre le texte dans la bulle*/
font-family: 'Inconsolata', monospace;important;
color:#000; /*couleur du texte*/
border: 1px solid #000; /*épaisseurs style et couleur des contours*/
-moz-border-radius: 12px; /*arrondis*/
-webkit-border-radius: 12px; /*arrondis*/
border-radius: 12px;} /*arrondis*/
Splash Sam 26 Oct 2019 - 12:28
Hi,
Voici une astuce qui va vous permettre de faire apparaître une infobulle, au survol de souris, sur une image dédiée
Voici le code HTML qui entourera votre image :
Ensuite on ajoute un code CSS :
Pensez à
Passez votre souris sur l'image :
Test infobulle
À bientôt
Dans cette astuce il est question d'ajouter un code à la feuille de style (CSS), si vous n'êtes pas à l'aise avec cette démarche il existe ce tuto d'aide ici > La CSS
Voici une astuce qui va vous permettre de faire apparaître une infobulle, au survol de souris, sur une image dédiée
Voici le code HTML qui entourera votre image :
Ensuite on ajoute un code CSS :
Pensez à
Passez votre souris sur l'image :
Test infobulle
| :u1: |
Pour bien réaliser cette astuce
Dans cette astuce il est question d'ajouter un code à la feuille de style (CSS), si vous n'êtes pas à l'aise avec cette démarche il existe ce tuto d'aide ici > La CSS
Sujets les plus actifs
Sujets les plus vus
Meilleurs posteurs
» » Modifier l'icône "On-line"
» » Bouton MP "Répondre" adapté à la version ModernBB
» » Insérer des boutons "Haut" & "Bas" de forum
» » Mettre une image au qeel
» » Modifier l'apparence du qeel
» » Liens haut & bas de page façon AwesomeBB
» » Mettre une image au qeel
» » Réduire la hauteur des catégories
» » [Edge] Hover sur l'avatar pour afficher les infos de profil
» » Un texte qui clignote
» » Centrer l'avatar, le pseudo & le rang dans les messages
» » Modifier l'apparence du qeel
» » Modifier la phrase Qui est en ligne ?
» » Personnaliser la navbar en CSS