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 un texte.

♦ Rendez-vous dans un éditeur de texte en format HTML.
♦ Insérez ce code en modifiant les MAJUSCULES par ce qui vous convient, puis validez :

<a class=”imginfo”>LIEN DU TEXTE QUI MENE AU CONTENU EXPLICATIF

 

<span><table width=”LARGEUR DU CADRE EXPLICATIF” cellpadding=”1″ cellspacing=”1″><tbody><tr><td style=”text-align: center;”> INSERER UN TITRE DANS LE CONTENU EXPLICATIF<br>

<div style=”text-align:justify;  margin: 10px”>ECRIVEZ VOTRE TEXTE DANS LE CONTENU EXPLICATIF<br><br><div></td></tr></tbody></table></span></a>

♦ 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 DES TEXTES

………………………………………………….*/

a.imginfo { /*mot à expliquer*/

text-decoration: none !important;

}

 

a.imginfo:hover {

z-index: 50;

cursor: defaut;

}

 

a.imginfo span { /*Vignette explicatif*/

text-decoration: none !important;

background-color: #COULEUR DU FOND;

border: 1px #COULEUR DE LA BORDURE solid;

padding-right:15px;

padding-left:15px;

padding-bottom:5px;

padding-top:5px;

width: LARGEUR DU CONTENU OU CADRE px;

display: none;  /* on masque l’infobulle */

}

 

a.imginfo:hover span  {

display:inline; /* on affiche l’infobulle */

position: absolute;

white-space: normal;

}

♦ 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 *