Bienvenue dans l’épisode deux de votre série du lundi! Tips & tricks !
Comme vous le savez peut-être, je suis graphiste et flasheur. En tant que flasheur j’utilise assez souvent des fichiers PNG transparents car Flash gère ça très bien. Je fais un peu plus rarement du HTML et c’est en montant ce blog, et plus particulièrement le prochain thème de ce blog que j’ai rencontré ce petit soucis avec IE 6…Bon en fait c’est pas tout c’est pas tout à fait la vérité, je savais déjà que ça passait pas sous IE6…c’était juste pour faire un teaser à 30 cents d’euro pour mon prochain thème!
Toujours est-il que j’ai du chercher pour la première fois la solution à ce problème! Il y a encore une fois pas mal de solution et de script de disponible. Après avoir fait le tour, celui d’Angus Turnbull me semble le mieux et surtout c’est un script qui evolue encore aujourd’hui car il vient de sortir une version 2 (encore en test).
Pour commencer il faut télécharger le script ici. Ensuite au niveau de la mise en place, c’est vraiment tout ce qu’il y a de plus simple! Pour les amoureux de l’anglais vous trouverez l’integralité des informations ici, pour les autres voici un petit résumé !
- Une fois que vous avez téléchargé et dezippé le fichier, copiez « iepngfix.htc » et «
blank.gif"dans votre site web ou dans le dossier de votre thèmes WordPress. - Ajouter ce code dans votre page HTML ou dans votre fichier CSS:
<style type= »text/css »>
img, div { behavior: url(iepngfix.htc) }
</style>
Evidement si vous comptez mettre du png transparent dans un lien ou d’autre type de balise, il faut les ajouter au code. Comme ceci par exemple :
<style type= »text/css »>
img, div, a, input { behavior: url(iepngfix.htc) }
</style> - Si besoin, en fonction de l’arborescence de votre site, il faudra éditer le fichier « iepngfix.htc » pour changer le ciblage du fichier « blank.gif« . Par exemple si le fichier se trouve dans le dossier « images« :
var blankImg = ‘/images/blank.gif’; - Et bah rien…Ah si, comme le dit l’auteur du script et je dois avouer que je suis assez pour ce genre de chose, si vous utilisez son script, pensez à faire une donation! Cliquez-ici pour le remercier!
Je profite de l’occasion pour vous poser la question, est-ce-qu’il vous arrive de faire des donations pour ce genre de chose ? Personnellement, je donne assez régulièrement, rarement des grosses sommes je dois l’avouer, mais ce que je peux. Pas mal de fois, je me suis sorti de gros merdier grâce à un type à l’autre bout de la planète qui a eut la générosité de partager son travail. Je me dis toujours que si des gens donnent, il y a de forte chance pour que les codeurs, graphistes, et j’en passe, continuent à donner.
Pour voir tous les « Tips & Tricks » c’est par ici!
4 réactions sur “Tips & Tricks #2 : Afficher des PNG transparents sous IE6”
5 septembre 2008 à 12:11
5 septembre 2008 à 14:18
@la qualité en PNG8 n’est pas du tout là même que celle du PNG24
5 septembre 2008 à 16:22
Oui, impossible de faire un dégradé en transparence par exemple avec PNG-8 : ça exclus beaucoup de choses !!
Merci beaucoup ! Étant débutante, je me cassais la tête depuis un long moment sur le sujet : c’est la libération !!!
Pour répondre à la question de ton post, je ne donne pas (même si j’en ai souvent l’envie…), mais j’essaie de laisser un commentaire, en quelque sorte un remerciement, quand je tombe sur quelque chose qui m’est utile.
5 septembre 2008 à 16:26
C’est sûr qu’on ne peut pas tous donner, mais j’incite vraiment tous ceux qui peuvent le faire à le faire















Ou bien il suffit (sous photoshop) d’exporter en PNG-8 et non en PNG-24 et là plus de souci avec les PNG sous IE6