Les forums Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Compteur de visites gratuit
Annonces
CAForum est aussi un forum d'aide pour phpBB. Voici le lien du forum : https://forums.caforum.fr
Vous voulez créer un forum sans publicités tout en étant propriétaire de votre base de données ?
Contactez moi sur le forum !
CAForum infos
Derniers sujets
» » Bouton MP "Répondre" adapté à la version ModernBB
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 13:03 par NIK SIURI

» » Réduire la hauteur des catégories
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 12:59 par NIK SIURI

» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 12:35 par NIK SIURI

» » Afficher les avatars en forme rectangulaire
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 11:47 par NIK SIURI

» » Modifier la partie des stats en début de qeel
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 11:45 par NIK SIURI

» » Mettre une image au qeel
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 11:37 par NIK SIURI

» » Rendre l'image du header cliquable
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 11:34 par NIK SIURI

» » Elargir le cadre de la boite de smileys
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 11:33 par NIK SIURI

» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 10:29 par NIK SIURI

» » Catégories rétractables sur l'index
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Catégories de différentes couleurs
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 10:07 par NIK SIURI

» » Centrer l'avatar, le pseudo & le rang dans les messages
Insérer une infobulle sur une image Clock-10Mer 31 Jan 2024 - 10:06 par NIK SIURI

» » Modifier l'icône "On-line"
Insérer une infobulle sur une image Clock-10Mar 23 Mai 2023 - 19:15 par Kionk

» » Insérer des boutons "Haut" & "Bas" de forum
Insérer une infobulle sur une image Clock-10Mar 23 Mai 2023 - 11:40 par Kionk

Mars 2024
LunMarMerJeuVenSamDim
    123
45678910
11121314151617
18192021222324
25262728293031

Calendrier Calendrier

Le Deal du moment : -20%
-20% sur le Lot de 2 écrans PC GIGABYTE ...
Voir le deal
429 €

Insérer une infobulle sur une image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash Sam 26 Oct 2019 - 12:28

  • MP
  • Zoom
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 :
Code:
<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>

Ensuite on ajoute un code CSS :
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*/

Pensez à  Valider 2




Passez votre souris sur l'image :


Test infobulle




:u1:
À bientôt
Bye




  Pour bien réaliser cette astuce
Like a Star @ heaven  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
David1195

StaffModo
StaffModo
David1195

MessageDavid1195 Jeu 31 Oct 2019 - 12:10

  • MP
  • Zoom
Merci beaucoup !

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum