Fixa transparenta PNG-bilder i Internet Explorer 6
2008-09-17 - atlas, javascript, png
0
images
Fick ännu ett mail som frågade om hur man fixar transparens i IE6, och eftersom jag uppmanade folk att fråga om dom ville veta så får jag väl lägga upp information om det helt enkelt. Detta är rätt så enkelt egentligen. Spara ned nedanstående javascript i en fil som heter pngfix.js och inkludera den i huvudet på varje sida som har PNG-filer. Om möjligt så inkludera det enbart om browsern är IE5.5 eller IE6.
Vad koden gör att den går igenom alla bild-taggar på sidan och ersätter dem med annan kod för att det ska fungera i IE6. Så den här img-taggen:
<img src='apa.png' width='20' height='20'>
Blir detta:
<span style='width: 20px; height: 20px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='apa.png', sizingMethod='image');'></span>
Och med den filter-metoden så kan nu IE6 visa transparensen i PNG-filen. Voila! Jag har ju en php-funktion för att skapa img-taggar så jag avgör redan där om det ska skrivas ut en img-tag eller en span-tag, så slipper man det lilla flimret som uppstår när det här scriptet kör igenom alla bilder