Il existe de nombreux scripts pour réaliser une infobulle (en Javascript surtout). Je vous propose un petit tutorial facile à mettre en oeuvre :
- un peu de CSS
- une ligne de XHTML et le tour est joué !
Allé, passons au code …
Dans un premier temps, copier-coller ce script dans votre fichier CSS.
/* Pour gérer les infobulles */
a.infobulle {
position:relative;
}
a.infobulle:hover
{
background: none;
z-index: 500;
}
a.infobulle
span {
display: none;
}
a.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
font-size:10px;
font-weight:normal;
width:300px;
top: 10px;
left: 50px;
background: white;
padding: 3px;
border: 1px solid #5D779A;
border-top: 4px solid #5D779A;
color: #000000;
}
/* Fin de la gestion de l'infobulles */
Puis dans un second temps, insérer cette syntaxe XHTML dans votre page web (on peut aussi l’insérer via du PHP, ASP, JSP, RoR, …)
Cliques sur moi pour afficher mon infobulleJe suis une infobulle
La balise d’hyperlien va permettre de déclencher l’apparition de l’infobulle au survol de la souris sur le lien, puis la balise SPAN va définir le contenu de l’infobulle. Si vous souhaitez afficher un message plus long, pensez à modifier la taille de l’infobulle à la ligne l.20 du code CSS (voir ci-dessus). Il est également possible d’aller à la ligne dans l’infobulle …
Voilà, ce tutorial se termine ici !
@plus
Pas de commentaire »