Infobulles
Une infobulle est un message qui apparaît
lors du passage du curseur de la souris
sur certains éléments
Comment proceder?
1. Premier code a mettre dans votre CSS
Si vous êtes en mode avancé,
pensez à le faire dans accueil, page et article
Le mieux est de le mettre tout en bas de votre feuille de style
a.viewpic {
position:relative;
border-bottom:1px dashed #808080;
text-decoration: none;
}
a:hover.viewpic {
text-decoration: none;
background: none;
}
a.viewpic span {display: none;}
a:hover.viewpic span {
display: inline;
position: absolute;
top: -20px;
left: 10px;
z-index: 20;
width:100%;
padding:2px 4px;}
position:relative;
border-bottom:1px dashed #808080;
text-decoration: none;
}
a:hover.viewpic {
text-decoration: none;
background: none;
}
a.viewpic span {display: none;}
a:hover.viewpic span {
display: inline;
position: absolute;
top: -20px;
left: 10px;
z-index: 20;
width:100%;
padding:2px 4px;}
2. Ensuite il vous faudra remplacer le mot
que vous souhaitez
Pour cela allez dans votre article
Prendre l'adresse de celui ci en haut de votre éditeur
Dans votre HTML remplacez le mot par ce code
| <a class="viewpic"href= Adresse de votre article">mot en question<span><img src="adresse de l'image" alt="mot en question" /></span></a> |
Remplacez évidemment par vos informations
les phrases de couleur orange
Exemple
| Je joue avec <a class="viewpic" href="http://lali-blogtest.over-blog.com/article-34233352.html">le chat<span><img src="http://pmsc.free.fr/I01/09725233131.gif" alt="le chat" /></span></a> en cueillant <a class="viewpic" href="http://lali-blogtest.over-blog.com/article-34233352.html">des fleurs<span><img src="http://pmsc.free.fr/I01/09725233756.gif" alt="des fleurs" /></span></a> |
Je joue avec le chat
en cueillant des fleurs
ou dans cet article
Et voila rien de plus simple
Videz votre cache après toute modification
Autres articles dans cette catégorie
Pensez a remplir aussi le formulaire
Pour toutes demandes de
créations graphiques
Publicité