PNG transparent sous IE6 : problème particulier

Hello,

Je souhaiterai utiliser une image PNG 24bits avec de la transparence, pour le fond d'un menu.
La documentation abonde sur le net pour permettre à IE6 d'afficher correctement les PNG transparent.

Pour des raisons d'accessibilité, je préférerai ne pas utiliser de Javascript.

La solution que j'ai trouvé est celle-ci (et qui provient de ce topic) : il suffit d'ajouter la ligne suivante à votre div :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); 

Seul pb, si votre div contient des éléments cliquables (liens, champs de formulaire...), ils seront inactifs sous IE6 !

Et je ne parviens pas à trouver une solution à ce problème !

Auriez-vous une idée ?
Modifié par EcliptuX (20 Nov 2006 - 20:42)

Je travaille actuellement sur une maquette de site ayant un menu dont le fond doit être légèrement transparent. N'ayant trouvé aucune solution avec AlphaImageLoader, j'ai donné une transparence de 70% à mon bloc menu avec:
filter: alpha (opacity=70);

C'est une solution critiquable pour les raisons suivantes :
- ça ne marche que pour les bloc ayant un "layout", c'est à dire une largeur/hauteur ou une position définie explicitement.
- le bloc entier est sujet à la tranparence (et pas seulement l'image de background). Le texte des menus est donc légèrement grisatre au lieu d'être parfaitement noir et cela ne permet pas d'avoir des zones de l'image opaques et d'autres transparentes.

D'un autre côté, ces inconvénients ne surviennent que pour IE6, les autres navigateurs (y compris IE7) n'ayant pas de problème avec les png.

J'ai donc considéré cette solution comme un "pis aller" satisfaisant pour moi. A toi de voir si ça te convient.

Si ton menu a une taille fixe et que tu peux le positionner en "absolute", rien ne t'empêche de créer deux blocs ayant exactement la même position et les mêmes dimensions :
- 1 bloc "calque" contenant l'image ayant la propriété opacity à 70 ou utilisant AlphaImageLoader
- 1 bloc "calque" par-dessus (et non pas dedans !) contenant le texte du menu

Dans tous les cas, note que ni le filtre AlphaImageLoader, ni le filtre "Opacity" ne sont actifs quand l'utilisateur a fixé un niveau de sécurité maximum sur son navigateur IE6. Débrouille toi donc pour que ton site reste à peu prés présentable en cas de fond rendu opaque par ce type de réglage.
Modifié par zapman (21 Nov 2006 - 04:59)

Sinon, j'ai une technique un peu bidouille mais qui marche de façon simple:
Si il s'agit d'un PNG existant, il suffit de le convertir en gif puis reconvertir ce dernier en PNG.
C'est peut etre bizarre, mais en tout cas ça marche (au moins en fesant ça avec des enregistrer sous dans toshop)

Bonjour,

le problème de ta technique il me semble, c'est qu'en enregistrant ton image en GIF (8 bits) et en la réenregistrant en PNG, tu n'as plus accès qu'à une transparence soit totale soit nulle. Tu perds ainsi toutes les nuances de transparence que le format 24 bit de PNG permet d'avoir. Sans parler de la réduction du nombre de couleurs.


Concernant le bug du formulaire, il n'y aurait pas une histoire de haslayout là dessous ? Je vais rechercher et j'éditerais si je retrouve.

Il est vrai que le gif ne permet pas de gerer une nuance de transparence.

Bonjour,

j'ai actuellement un peu le même problème, j'aimerais utiliser la transparence de PNG sur IE5 et 6, malheureusement, toutes les techniques (bidouilles ? ) que j'ai trouvé sur internet ne fonctionne absolument pas.

Je commence à penser que je vais être obligé de bosser sur du GIF. Connaissez vous dans ce cas un convertisseur PNG -> GIF, car quand j'enregistre un PNG en GIF sous The GIMP, et bine ma foi, j'ai une image horrible avec des points de couleurs diverses un peu partout...

Merci d'avance !

Les (nombreuses) bidouilles qu'on trouve sur le net fonctionnent, à condition de bien comprendre ce que l'on fait.

Pour ceux que ça intéresse j'ai résumé les différentes techniques ici

Enfin il faut bien avoir à l'esprit que c'est uniquement le PNG avec une couche alpha qui pose problème (24bits + 8bits pour la couche alpha, soit 32bits cad 16 millions de couleurs), le PNG 8bits s'affiche correctement sous IE6 (8bits, soit 256 couleurs maximum sans alpha, comme pour le GIF)

Merci !

Est ce que quelqu'un saurait comment faire un PNG 8bits sous The GIMP ? Parce qu'étant donné que mon image ne demande pas un grand nombre de couleur, je ne pense pas que le passer en 8bits changera beaucoup de chose.

Par contre sur le lien que tu m'as fait passé, l'auteur aborde la technique avec les .htc, mais il me semble avoir lu que cette technique était obsolète depuis le pack SP2 qui apparement désactive ce genre de comportement, non ?

Non ça fonctionne très bien, en fait depuis le SP2 il faut juste que le htc soit servi par le serveur avec le bon mime-type (text/x-component)