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.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

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 :)

návštěvník

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

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Novinka listopad 2020

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru