:hover sur une image png

Bonjour,

j'essaie mais je ne parviens pas à mettre un :hover pour griser une image miniature .png au survol du curseur.

Comment faire?
la remplacer par une autre image quand survol? via quelle moyen?

Merci de vos réponses

CI dessous l'essai;

.lien {color: #3366FF ; text-decoration: none; border-style :none; font-size: 22px; color: #000000 ;}
.lien:hover{color:#999999;}

<td align="Center"><span class="Style1">Phot<a href="apercu.html"><img src="images/apercunoir.png" alt="apercu" border="0" class="lien"/></a>grapher&nbsp;&nbsp;<a href="contact.html" class="lien">@</a>rtist</span></td>

Modifié par Florent V. (04 Aug 2010 - 16:37)

Salut,

La remplacer par une autre image, version N&B de l'originale, est effectivement la solution la plus couramment utilisée. C'est un simple changement de background-image lors du survol.

Si tu cherches à tout prix à éviter ce système (parce que tu n'as pas de contrôle sur les images, par exemple), tu peux te chercher une solution à base de <canvas> pour les navigateurs récents (mais c'est plus compliqué, et pas supporté par les anciennes versions), et de filtres proprios pour IE (là par contre très simple, et efficace).

Bonjour,

Il est tout à fait possible de remplacer une image se trouvant dans le code HTML (vu que l'image de l'exemple se trouve être le supporte d'un lien, il ne faut surtout pas la placer en image de fond via CSS) avec JavaScript (cébonmangézan).