Pb avec des DIV/PNG et Internet Explorer

Bonjour à tous,

J'ai un pb avec des PNG transparents et une fonction de mouseover gérée par JSQery.

L'URL : http://ehretic.sytes.net/ehretic

Le CSS : http://ehretic.sytes.net/ehretic/css/style.css

Le principe a été adpaté de cet article : http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/ donc : quand on passe sur une image avec la souris, le jsquery affiche avec un fade le bas (ou le haut de l'image). Il en résulte un effet de désaturation avec apparition du titre sur mon site.

Le pb : sous IE (7 & 8), une fois un passage avec la souris effectué, la bordure transparente de l'image passe à l'opaque ! J'ai beau cherché dans mon CSS et changer des paramètres pour essayer de trouver le pb, je ne parvient pas à trouver un moyen de corriger ce pb sous IE.

Est ce quelqu'un a une idée pour m'aider ?

PS : Opera et FF : pas de pb
Modifié par EHRETic (22 Mar 2011 - 18:18)

Hello,

Copié-collé de ce que j'ai écrit quelques heures plus tôt dans un autre sujet sur ce forum:

fvsch a écrit :
Il y a des problèmes avec les images translucides (PNG-32 ou PNG-8 avec alpha 8 bits) lorsqu'on applique un filtre DirectX opacity dans IE 6-8. Et la méthode jQuery.show utilise justement ce filtre DirectX dans IE 6-8 vu que ces derniers ne supportent pas nativement la propriété CSS3 opacity.

On parle de ce problème ici:
http://calendar.perfplanet.com/2010/png-that-works/#24bit+css

La solution consiste à... ne pas se mettre dans ce cas de figure.
Donc ne pas avoir d'image translucide en contenu ou fond d'un élément dont on fait varier l'opacité.

Il y a peut-être moyen d'obtenir le bon effet dans IE 7-8 en contournant ce problème. Mais un correctif (sans doute à base de JavaScript) par dessus un autre correctif (utilisation d'un filtre DirectX par jQuery), c'est le genre de situation à éviter si on ne veut pas finir dingue.

Merci pour la réponse, mais ça veut dire que je vais devenir dingue... Puisqu'il n'existe pas de vraie solution !

Est ce qu'il existe d'autres "méthodes" pour passer d'une image à une autre avec un fondu ?

J'avais trouvée celle-ci, mais peut-être qu'il existe quelque chose de plus simple, ou de tout simplement différent que JsQuery ?

Tu conseillerais quoi pour faire le même effet ?
Modifié par EHRETic (22 Mar 2011 - 21:53)

Est ce qu'il existe un moyen de choisir son effet suivant le navigateur ?

Je m'explique donc IE7-8 --> changement d'image simple couleur/NB quand on passe dessus.

Les autres récents (Opera, Chrome, FF, IE9) --> ma transition en fondu, comme actuellement.

Si c'est possible, je préfère partir sur cette soluce.

Le problème actuellement c'est l'utilisation du filtre d'opacité (propre à IE) avec une image translucide. Si tu veux corriger le problème dans IE, tu peux:
- soit partir sur des images opaques (pas souhaitable ici je pense);
- soit éviter d'utiliser le filtre d'opacité.

Tu dois pouvoir utiliser opacity (CSS3) et les transitions CSS pour obtenir le même effet sans JavaScript, par exemple:

#machin a img {
  opacity: 1;
  -webkit-transition: opacity linear 1s;
  -moz-transition: opacity linear 1s;
  -o-transition: opacity linear 1s;
  transition: opacity linear 1s;
}
#machin a:hover,
#machin a:focus {
  opacity: 0;
  filter: alpha(opacity=0); /* Pour IE 7-9 */
}