Hover effect avec CSS et Jquery

Bonjour à tous,

Je finalise un site dont le menu utilise un effet hover avec Jquery sur des images en PNG avec transparence.
Cela fonctionne à merveille sur Fox, Safari et Chrome, par contre sur IE 7 et 8, la transparence est remplacée par du noir.

http://www.bieresoceanindien.fr/pages/jeu_nv_bieres.php

Quelqu'un serait-il pourquoi ?

Merci de vos réponse

je ne suis pas expert, mais as tu essayé de changer les options d'enregistrement de la transparence de tes PNG ?
tu as essayé en PNG8 ?

salut,

Le problème c'est que le png 8 a le même effet de transparence que le gif et le rendu n'est pas terrible.

Merci qd même pour ta réponse.

Jeff 2 Papangue a écrit :
Quelqu'un serait-il pourquoi ?

Effet secondaire du filtre DirectX utilisé par jQuery pour émuler la propriétés CSS3 opacity dans IE 6-8. Ces derniers ne connaissent pas opacity (et le futur IE9 corrigera enfin ce manque criant).

Je ne connais aucune parade, mis à part réserver cet effet d'opacité aux navigateurs qui le supportent vraiment.
Mais je n'ai pas cherché de solution particulière.

Jeff 2 Papangue a écrit :
Le problème c'est que le png 8 a le même effet de transparence que le gif et le rendu n'est pas terrible..

Pas tout à fait : le PNG8 supporte la transparence graduelle.
Regarde ici.

IE supporte bien les PNG avec transparence depuis sa version 7.
Le problème semble provenir de l'animation que tu souhaites appliquer (fondu) : j'ai le même souci sous Firefox (entre autres), d'une façon moins prononcée (mais les dégradés de noir qui se superposent, ça fait pas joli quand même).
Modifié par Ladytron (06 Apr 2010 - 10:56)

ok merci pour toutes vos réponses. Je pense que j'envisagerai la prochaine fois ce genre de solution plus avec du jpg que du png transparent.