Úvod » Aktuality » Články » Jak na poloprůhledné PNG obrázky v Internet Exploreru 6

Jak na poloprůhledné PNG obrázky v Internet Exploreru 6

Snad každý web designer dříve či později řešil situaci, kdy v prohlížeči IE potřeboval zprovoznit poloprůhlednost u 24bitových PNG souborů. Na internetu se vyskytuje široká plejáda pluginů, které se s tímto problémem snaží „porvat“, jen jeden z nich však plní to, co se od něj očekává.

Řeč je o JavaScriptovém pluginu DD_belatedPNG. Dokáže totiž kromě přímo vložených obrázků pomocí IMG tagu také korigovat obrázky vkládané background-image vlastností CSS předpisů.

Kouzlo tohoto nástroje spočívá v tom, že se pro vykreslování obrázků nepoužívají standardní AlphaImageLoader filtry, ale jiná technologie z dílen Microsoftu, Vector Markup Language, což je značkovací jazyk postavený na XML, používaný k definici vektorových objektů.

Nemusíte se však bát, že byste se museli učit novým jazykům, DD_Belated má veškerou obsluhu zapouzdřenou v sobě.

Použití DD_BelatedPNG

Zprovoznění pluginu se dá shrnout do několika málo bodů:

• stáhnutí zdrojového souboru
• přidání odkazu na zdrojový soubor v HTML dokumentu
• zavolání DD_Belated.fix() s CSS selektory jako parametry

Stáhnutí zdrojového souboru

Zdrojové soubory pro DD_BelatedPNG si můžete stáhnout na stránkách jeho tvůrce.

Přidání odkazu do HTML dokumentu

Do hlavičky HTML dokumentu je zapotřebí vložit následující řádky kódu odkazující se na umístění skriptu:

<!--[if IE 6]>
 <script src="/vase/cesta/k/souboru/DD_belatedPNG.js"></script>
<![endif]-->

Cesta je vložená do podmíněného příkazu, kterému rozumí jen IE; ostatní prohlížeče jej vyhodnotí jako komentář, proto se skript pro ně nenačte.

Spuštění pluginu

Nyní zbývá zavolat DD_Belated do akce. Nejlepším způsobem, jak toho docílit, je vytvoření samostatného .js souboru a odkazu na něj opět v hlavičce HTML dokumentu:

<!--[if IE 6]>
 <script src="/vase/cesta/k/souboru/DD_belatedPNG_start.js"></script>
<![endif]-->

Použití pluginu pro tuto stránku by vypadal takto:

DD_belatedPNG.fix(".transparent .tecko");

Zaměřeny budou jen elementy, které mají přiřazenou třídu tecko a jejichž nadřazený element má přiřazenou třídu transparent. Pravidla kaskády a selektorů zde fungují identicky jako u CSS. Pozor, element body nelze zaměřit!

Závěr

Následující obrázky obsahují logo TOVARNA.CZ, které využívá poloprůhlednosti PNG formátu. Obrázek vlevo nevyhovuje předpisu, který jsme DD_BelatedPNG předali, proto bude Internet Explorerem vykreslen standardním způsobem (s šedým čtvercem za logem). Obrázek vpravo předpisu vyhovuje, filtr na něj tedy bude použit. Výsledek si můžete prohlédnout ve svém prohlížeči.