pour faire apparaître une image en passant votre souris sur un mot. Cette méthode est adaptée de l'article Infobulle (Popup) en CSS.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dignissim eros Survolez-moi nisl. Cras et tortor sed nisl auctor placerat. Morbi et quam id neque blandit pellentesque. Ut nisi ipsum, pretium ac, pretium a, pulvinar adipiscing, nisi. Nulla facilisi. Donec vehicula tellus sed enim. Morbi consequat, augue sed vulputate adipiscing, velit risus vestibulum odio, quis adipiscing
En plaçant le curseur de votre souris sur le mot souligné en pointillé vous verrez apparaître une image.
Pour obtenir ce résultat vous devez procéder en 2 ètapes:
- La première, vous devez ajouter dans votre CSS (au niveau des éléments principaux) le code suivant:
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;
}
- La deuxième, dans vos articles, chaque fois que vous voulez insérer une image comme cell-ci au survol d'un mot ou d'une expression, il suffit de mettre le code suivant en mode source:
<a class="viewpic" href="#">Survolez-moi<span><img src="url_image.jpg" alt="" /></span></a>
<a class="viewpic" href="#"> <span><img src="url_image.jpg" alt="" /></span></a>
Si vous voulez modifier la position de l'image, dans le CSS, modifiez les valeurs des propriétés top
et left
.
http://img71.imageshack.us/img71/3774/gifartuk9.gif