i |
Faire apparaître une image au survol d'un mot |
1) Collez le code CSS suivant dans un champ Toweb et ajoutez vos images en fichiers additionnels :
<style type="text/css">
a.viewpic {
position:relative;
border-bottom:1px dashed red;
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: 50px;
z-index: 20;
width:100%;
padding:2px 4px;
}
</style>
top et left pour positionner vos images par rapport à votre texte.
2) Placez ce champ sur la page où vous voulez faire apparaître les images.
3) Dans votre texte insérez vos images de cette façon:
<html><a class="viewpic" href="#"> test <span><img src="le nom de votre image" title="un commentaire" width= votre largeur height= votre hauteur/></span></a> </html>
Largeur et Hauteur seront celles de l'image qui doit être affichée et pas forcément celles d'origine.
Une valeur suffit pour que l'image garde ses proportions.
Si vous voulez avoir le script sur tout votre site, placez le CSS dans le Head de votre site.
Dans ce cas il faudra faire un dossier images chez votre hébergeur et indiquer le chemin pour chaque image