Exemple
lien 1Axolotl 1
lien 2Axolotl 2
lien 3Axolotl 3
a span {display:none ; /* cache les <span> placés dans
un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span>
*/
color:black} /* met le texte <span> en noir */
a:hover span {display: block; /* Montre le texte <span> lors
du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise
de l'écran */
top: 370px; /* cette zone se situe à 370 pixels du haut */
left: 250px ; /* cette zone se situe à 250 pixels de la gauche*/
border:inset; /* Style de bordure */
padding: 4px; /* Marge intérieure à la bordure */
text-align:center} /* Centrage du nom de l'image */
</style>
</head>
<body>
<a href="#">lien 1<span>Axolotl 1<br><img
src="/axo_bicolor1_vignette.jpg" alt="Axolotl vignette 1"></span></a>
<!-- Appel de l'image et de son nom -->
<a href="#">lien 2<span>Axolotl 2<br><img src="/axo_bicolor2_vignette.jpg"
alt="Axolotl vignette 2"></span></a> <!--
Appel de l'image et de son nom -->
<a href="#">lien 3<span>Axolotl 3<br><img src="/axo_bicolor3_vignette.jpg"
alt="Axolotl vignette 3"></span></a> <!--
Appel de l'image et de son nom -->
</body>
</html>
Nota :
Quand les images que l'on souhaite afficher en survol sont un peu lourdes (ce qui n'est pas le cas ici), il y a un phénomène d'attente à chaque survol, qui peut prendre plusieurs secondes à chaque survol. Cela devient vite pénible. On peut alors faire un pré-chargement javascript des images lors de l'ouverture de la page : on joue sur le fait que l'utilisateur va prendre quelques secondes pour regarder la page avant de commencer à utiliser les survols. Pendant ces quelques secondes, le pré-chargement des images se lance. Lors du survol, il n'y aura donc aucun effet d'attente.
Le code Javascipt suivant doit être inséré dans
la balise <head>, par exemple juste en dessous de la définition
des CSS :
<script language="javascript" type="text/javascript">
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("image1.jpg","image2.jpg");
</script>
ou image1.jpg, image2.jpg, etc... sont les noms des images à pré-charger. Vous pouvez en mettre autant que vous voulez, sachant que cela allonge le temps du pré-chargement. Heureusement, même si vous pré-chargez 20 images, il suffit que le pré-chargement des premières soit terminé quand l'utilisateur commencera à les utiliser : les autres continueront à se charger en tache de fond. Mais n'abusez pas.
COMMENTAIRES
Ce script cache une photo dans une balise <span> grace à un display:none. Un survol a:hover remplace display:none par display:block, c'est à dire fait afficher le contenu du <span>.
Reste à décider de la zone ou apparaîtra ce commentaire.
C'est un script proche de l'exemple 1, mais utilisé pour des photos.
L'inconvénient est le temps d'affichage des photos : elles ne se chargent en effet pas lors de l'affichage de la page, mais lors du survol à la souri. Pour contourner le problème, on peut faire un pré-chargement.
Nota : attention position:absolute positionne à partir de la position de la boite "parent", pas à partir du haut de la page. Ici, la boite parent, c'est <a>. Cela peut entraîner des problèmes de positionnement dans certains cas.