Průhlednost PNG a Internet Explorer 6

Tvůrci webu se často potýkají s tím, že starší verze Internet Exploreru nezvládají průhlednost v grafickém formátu PNG. Použití obrázků PNG, které průhlednost nabízí, má přitom své opodstatnění. GIF, který Internet Explorer 6 bez problému podporuje, pracuje maximálně s 256 barvami a průhlednost v jeho podání nelze srovnávat s tzv. poloprůhledností u PNG. Naštěstí lze Internet Explorer verzí 6 a 5.5 poměrně snadno přimět k tomu, aby respektoval všechny výhody PNG, tedy i jeho průhlednost.

Reklama

Způsobů řešení tohoto problému existuje několik. Jako nejjednodušší a nejefektivnější mi připadne doplnění jediného souboru s JavaScriptem, případně jeho vykopírování a vložení přímo do těla stránky. Obsahem tohoto skriptu je smyčka procházející všechny obrázky v těle stránky. Pokud najde PNG, pak aplikuje filtr AlphaImageLoader, který v Internet Exploreru 5.5 a 6 zajistí zprůhlednění odpovídající části obrázku PNG. 

Vzhledem k využití zmíněného filtru funguje tento postup pouze v Internet Exploreru 6 a 5.5. Starší verze prohlížeče filtr nepodporují, IE7 pak zvládá průhledné PNG i bez tohoto postupu. Připojený JavaScriptový soubor je nutné umístit mezi podmínkový komentář sledující, zda je použit Internet Explorer starší než verze 7. Tato podmínka se navíc v jiných prohlížečích nevyhodnocuje a je plně validní, nemusíte se tedy bát ji v kódu použít.

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]--> 

Výraz defer ve značce script zajišťuje, aby obrázky byly upraveny ještě před tím, než budou na stránce vykresleny. Příslušný soubor pngfix.js a jeho varianty pro obrazové mapy a tzv. rollover obrázky si stáhněte ze stránky homepage.ntlworld.com/bobosola v sekci How To Use. Doporučuji si prohlédnout i příklady částečné průhlednosti PNG a rozdíl mezi PNG a GIFem.

Řešení průhlednosti PNG v Drupalu 

Před pár dny se na Drupal.org objevil nový modul, který také zajišťuje správné zpracování průhlednosti v Internet Exploreru 5.5 a 6. Využívá výše zmíněný soubor pngfix.js. Modul stačí nainstalovat a aktivovat, žádné další nastavování není potřeba. Kouknete-li, jak je napsán, zjistíte, že obsahuje pouze funkci pro zobrazení nápovědy a zavěšení na výpis drupalovské hlavičky. Do ní pak přidá volání JavaScriptového souboru. Modul si můžete stáhnout z jeho projektové stránky na Drupal.org; jmenuje se PNG Fix.

Reklama

Komentáře

Dobrá věcička hned sem ji využil pro svůj novej web a doporučil jsem to i dalším :) jediný co mě mrzí je to že když vložim png do pozadí divu atd tak tam to nefunguje :'( zrovna by se mi tam hodila postupná průhlednost u jednoho :/

každopádně dík za článek :)

Díky za článek. Moc mi to pomohlo, protoze ty bili ctverecky se smajlikem uprostred nevypadali na tmavy strance 2x lakave :)

Dik moc!

Přidat komentář