Jak na průhledné png v IE6

06. srpna 2009 | Autor: Michal | komentáře

Určitě každý z nás již řešil situaci, kdy použil průhledné png na svých webových stránkách a následně se zděšením zjistil, že se to v prohlížeči IE6 nezobrazuje až tak podle jeho představ, resp. vůbec. Následně zvedl své oči k internetu a hledal… Řešení se nabízí několik (css, js) a však žádná nebyla 100%. Až do doby, než se objevila knihovna DD_belatedPNG.
Přidání odkazu do hlavičky webu
Externí soubor budeme načítat pouze má-li uživatel prohlížeč IE6.

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

Použití pluginu
Následně do hlavičky vložíme ještě tento kód. Jsou zde dvě možnosti použití.

DD_belatedPNG.fix('.hlavniDiv, .vnitrniDiv, , img'); 
DD_belatedPNG.fixPNG('.hlavniDiv, .vnitrniDiv, img');

Zprůhledněny budou jen ty elementy, které mají přiřazenou třídu „hlavniDiv“ a podtřídu „vnitrniDiv“. Pravidla jsou identická s CSS.

Celý příklad

<!--[if IE 6]> 
<script src="/cesta/k/souboru/DD_belatedPNG.js"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('. hlavniDiv, . vnitrniDiv, .jinyDiv, img'); 
DD_belatedPNG.fixPNG('.hlavniDiv, .vnitrniDiv, img'); 
</script> 
<![endif]-->

Tímto elegantním způsobem rychle docílíme vyřešení našeho problému

Komentáře