L’infobulle est une information pratique qui apparaît lorsque le curseur de la souris se positionne sur un élément d’une page internet. Dans ce tutoriel, vous allons parlons d’une infobulle sur une image.

♦ Rendez-vous dans un éditeur de texte en format HTML.
♦ Insérez ce code en modifiant les MAJUSCULES par ce qui vous convient. Gardez bien le code dans la table afin que vos infobulles soient bien calibrées, puis validez :

 

<center><table cellspacing=”1″><tr>

<td><div class=”infobulle”><div class=”opacity”>
<img src=”URL DE VOTRE IMAGE” class=”gradualfader”></div>
<span><div align=”center”> METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br></div></div></span></div></td>

<td><div class=”infobulle”><div class=”opacity”>
<img src=”URL DE VOTRE IMAGE” class=”gradualfader”></div>
<span><div align=”center”> METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br></div></div></span></div></td>

<td><div class=”infobulle”><div class=”opacity”>
<img src=”URL DE VOTRE IMAGE” class=”gradualfader”></div>
<span><div align=”center”>METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br></div></div></span></div></td>

</tr></table></center>

 

♦ Vous pouvez mettre une infobulle autant que vous voulez !
Si vous souhaitez supprimer une infobulle, vous devez supprimer à partir de la balise < td > jusqu’au prochain < / td > comme par exemple :

<td><div class=”infobulle”><div class=”opacity”>
<img src=”URL DE VOTRE IMAGE” class=”gradualfader”></div>
<span><div align=”center”> METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br>
METTRE VOTRE CONTENU ICI<br></div></div></span></div></td>

♦ Ensuite, dirigez-vous maintenant dans Affichages > Couleurs > Général > Feuille de Style CSS pour les forums “ForumActif” ou votre fichier style.css de votre site.
♦ Installez ce code en modifiant les caractères en majuscule :

/* INFOBULLE
—————————————————-*/

.infobulle {
border-bottom: none;
position: relative;
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
-ms-opacity:0.5;opacity: 0.5;
-o-opacity:0.5;opacity: 0.5;
-webkit-opacity:0.5;opacity: 0.5;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

 

.infobulle span {

display: none;

}

 

.infobulle:hover {
background-image: url(“URL DE VOTRE TEXTURE DE FOND “);
background-color : #COULEUR DU FOND SI VOUS N’AYEZ PAS DE FOND ;
z-index: 50;
cursor: defaut;
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
-ms-opacity:1;opacity: 1;
-o-opacity:1;opacity: 1;
-webkit-opacity:1;opacity: 1;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

 

.infobulle:hover span {
color: #COULEUR DU TEXTE ;
text-decoration: none;
text-align: center;
font-size: 11px;
background-image: url(“URL DE VOTRE TEXTURE DE FOND “);
background-color : #COULEUR DU FOND SI VOUS N’AYEZ PAS DE FOND ;
border: 3px solid #COULEUR DE LA BORDURE ;
padding: 10px;
display: inline;
position: absolute;
white-space: nowrap;
top: 20px;
left: 20px;
}

♦ Et c’est terminé !

© By Shaynee

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *