Le_Phoenix
mercredi 19 octobre 2005 à 03:06
Bonjour,
J'avais trouvé un petit truc sympa en CSS au survol de l'image au lieu d'afficher une légende, tu affiche une image avec du texte. en plus des que tu enléve le pointeur de l'image, elle disparait, une sécurité de + pour ne pas se les faire copier.
Je joins le code que j'ai utilisé, peut être pas le top, a améliorer. il faut juste faire autant de code "photo" que d'image (photo1+tout le code, photo2+ tout le code, etc...) dans le CSS. Y a peut être plus simple, a voir
HTML :
<a href=""><span><img src="design/ta_grande_image"><br>texte</span><img src="design/ta_petite_image" class="photo1" alt="texte" /></a>
CSS :
a img
{
border: none; /* Suppression de la bordure d'image */
}
/* image zoom au survol debut*/
a span {
display: none;
}
a:hover span {
display: inline;
position: absolute;
top: 0px; /*position de l'image en hauteur*/
left: 0px; /*position de l'image a partir du bord gauche*/
width: 0px; /*largeur de l'image*/
height: 0px;/*hauteur de l'image*/
background: #B1E939;
text-align: center;
color: black;
border: dotted;
}
/*image zoom au survol fin*/
.photo1 /* Affichage image */
{
float: right; /*alignement à droite*/
margin-right: 5px; /* placement droit dans le bloc */
margin-top: 10px; /* placement haut dans le bloc */
border: 0;
}
Voilà, sinon recherche "image zoom" en CSS pour plus de détails.
Cordialement.
P.S. : je ne suis pas un pro et il y a peut être des erreurs. voir aussi s'il fonctionne avec tous les navigateurs.
