|
|
|
|
Re: lien furtif sur mot ... [message n° 216373 est une réponse au message n° 216139] |
mer. 14 mars 2007 23:06  |
|
fredp | |
| messages : 813
Inscrit(e) : novembre 2004 Situation géographique : Maine et Loire (49) Métier : CM1-CM2 | |
|
Ça devrait être un truc comme celui-ci :
<html>
<head>
<style type="text/css">
a:hover {border-bottom: 0px}/* indispensable pour IE seulement */
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>
http://css-astuces.batraciens.net/commentaires-survol3.htm
Rapporter un message au modérateur
|
|
|