Une bulle d’info en CSS sur les liens
Voici comment créé des bulles d’informations en CSS. Ces bulles ont le même style que celles de websnaprCe site web prend des screenshots des requêtes qu’il reçoit, ensuite il les stocks dans une base de donnée. Elles ont une hauteur et une largeur fixe, ce qui limite le nombre de caractère à y insérer.
Voici un exemple de ces bulles
Qu’est-ce qu’un cadavre exquis graphiqueC’est une composition graphique qui se suit et qu’on ne sait jamais qu’est-ce qu’on aura. ?
Voici à quoi l’image PNG pour la création de cette bulle d’information ressemble. Cet aperçu à directement été pris dans photoshop.
Cliquez içi pour télécharger la vrai image
Maintenant, voici le code pour créé cette bulle d’information
Le code HTML
<a href="votreDestination" class="info">Le nom de votre lien
<span>La description de votre lien avec un maximum de 130
caractère dans ce cas si</span></a>
Le code CSS
a.info {
position:relative; /* Très important */
background:none; /* Important pour le fonctionnement sur IE */
z-index:10;
}
a.info:hover {
z-index:20;
}
a.info span {
display:none;
}
a.info:hover span { /*la tag SPAN apparaitra avec l’effet hover*/
display:block;
position:absolute;
top:18px;
left:10px;
/* Éléments pour positionner le texte dans la bulle */
/* Vous pouvez aussi utiliser le padding:24px 8px 5px 25px; */
padding-left:25px;
padding-top:24px;
padding-bottom:5px;
padding-right:8px;
width:205px;
height:45px;
/* Style du character dans la bulle */
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-style:italic;
font-size:10px;
color:#999999;
text-decoration:none;
text-align:justify;
}
/* Pour avoir un beau background de bulle avec PNG transparent*/
a.info:hover>span {
background-image:url(images/bgInfo.png);
}
a.info:hover span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/bgInfo.png",
sizingMethod="crop");
}
Voilà, j’espère qu’avec ce tutoriel vous serez en mesure de créé cet effet de bulle à la 2.0. Si vous avez des questions, n’hésitez pas à les poser sur notre forum. Bonne chance !
Tags: Bulle d'info, CSS, liens, Tutoriel
9 février 2008 à 0:07
Intéressant , je bookmark merci du tuyau !
9 février 2008 à 0:09
Super pratique ce tuto… je teste dès ce soir !
Si ça marche, je t’ajoute un mark (tutmarks.com) aussitôt
9 février 2008 à 0:10
Dommage que la hauteur ne prend pas en compte le contenu limitant ainsi l’utilisation de cet info-bulle sympathique d’un point de vue design.
9 février 2008 à 0:11
Ça se fait très bien d’ajuster la hauteur en fonction du texte, mais ça implique plus de ligne de code pour ça. La le code est le plus simple possible. Mais, j’ai l’intention d’en faire une version plus complexe et avec ajustement automatique.
9 février 2008 à 0:13
C’est une bonne chose, pour qu’un objet soit utilisé par le plus de monde possible, il faut le brider le moins possible (plus facile à dire qu’à faire :) ).
Bravo pour ton travail
9 février 2008 à 0:13
très chouette, très clair, très bien
9 février 2008 à 0:15
vraiment magnifique se tuto merci beaucaup a son auteur
9 février 2008 à 0:15
Superbe, merci beaucoup.
28 mars 2008 à 8:12
Parfait !
Le seul problème chez moi, c’est que même avec un text-decoration:none; j’ai le contenu de la bulle qui est souligné par un trait de la meme couleur que le lien (visité ou non)
28 mars 2008 à 12:39
Essai un border:0px; ou de mettre un !important sur la ligne de ton text-decoration: none …
Exemple :
text-decoration: none !important;
29 mars 2008 à 9:35
Non aucune des deux propositions ne fonctionne, de plus la bulle est découpée au bord de mon conteneur, même avec un z-index de 20 sur la bulle et de 2 sur le conteneur.
29 mars 2008 à 20:50
Peux-tu me donner l’URL pour que je puisse voir ton code ?
30 mars 2008 à 6:59
Le site est normalement uniquement en local mais j’ai mis une version tronquée en ligne : xttp://xxxxxxx.xxx/sinistres/
Tu cliques directement sur “connexion”, puis a gauche sur “assurés” tu as ensuite un exemple de la bulle sur la page de droite sur le lien du téléphone.
Merci de ton aide ;)
31 mars 2008 à 15:30
j’ai regardé le problème de votre info bulles, dans vos CSS ce qui cause problème c’est le overflow-y: auto; dans la class .accueil
Je l’ai supprimé et ça semble bien fonctionné, si vous mettez un overflow, tout ce qui se retrouve dans la tag ne débordera pas et se retrouvera caché.
J’espère que je réponds a votre problème.
Bonne journée !
17 juillet 2008 à 7:55
Genial ton tuto, mais est-il possible de mettre cette infobulle sur une image? J’ai essayé, mais l’infobulle se met sur l’image alors que j’aimerais qu’elle se mette en bas à droite…Est-ce possible?
Merci