Niveau
..........
En rapport...

Créer une infobulle

Voici une méthode pour créer des infobulles pour vos liens en n'utilisant que du CSS.

Le css

css
.info{
position:relative;/*important*/
background-color:#ccc;
color:#000;
text-decoration:none;
}
.info:hover{
background-color:#ff0;
}
.info span{/*on rend le span invisible*/
display:none;
}
.info:hover span{ /*le contenu de la balise span n'apparaitre que lorsque le lien possédant la class "info" sera survolé*/
/*Positionnement de l'info bulle*/
display:block;
position:absolute;
top:1.5em; 
left:1.5em; 
width:150px;
/*aspect visuel de l'info bulle*/
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center;
}

Le html

html4strict
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sed velit eget massa fringilla egestas. Pellentesque ligula. Vivamus elementum rutrum lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi massa est, semper sit amet, consectetuer ac, mattis at, justo. Phasellus gravida ornare massa. Mauris placerat cursus sapien. 
<a class="info" href="#">Ici vous verrez une info bulle<span>Texte de mon infobulle</span></a>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam urna eros, scelerisque nec, convallis id, suscipit quis, nunc. Quisque auctor diam. Nunc ac diam. Aliquam metus justo, ultricies quis,<a class="info" href="#">Ici aussi<span>Voici le texte de ma 2eme infobulle</span></a> condimentum vitae, porttitor posuere, sem. Cras commodo luctus eros. Etiam dolor velit, rutrum non, ullamcorper nec, venenatis nec, turpis. Pellentesque fermentum.

Le résultat:

infobulle.zip

maniT4c 27/01/2006 10:45