Řešení pomocí CSS
Toto má dva kroky vytvoření css pravidel pro použití filtru při zobrazení obrázku a aplikace tohoto pouze pro IE6.
Vlastní pravidlo může vypadat například takto:
Pro běžné prohlížeče umístěno v souboru style.css:
.obrazek
{
background-image:url(/images/obrazek.png);
}
Pro IE6 umístěno v souboru style-IE6.css:
.obrazek
{
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='/images/obrazek.png', sizingMethod='scale');
}
Pokud tedy máme dva soubory se styly, můžeme je nalinkovat do stránky tak, aby soubor style-IE6.css byl načítán pouze v IE6:
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="/css/style-IE6.css" rel="stylesheet" type="text/css" />
<![endif]—>
A to je vše. Obrázek zobrazený css pravidlem bude správě zobrazen i v IE6. V tomto řešení spatřuji problém v tom, že každý obrázek na webu je nutné takto ošetřit a to se nemusí vždy podařit.
Řešení pomocí Javascriptu založeném na JQuery knihovně
O proti předchozímu řešení je zde přilinkována Javascriptová knihovna založená na JQuery a jednoduché zavolání funkce z této knihovny, které ošetří všechny png obrázky. Samozřejmě je nutné mít přilinkovanou i samotnou JQuery knihovnu.
Příklad použití:
Přilinkování knihoven:
<script src="/js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="/js/jquery.pngFix.pack.js" type="text/javascript"></script>
Vlastní volání umístěné například mezi tagy head:
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix(); });
</script>
...
</head>
Více se tomuto tématu věnuje tento web, kde je možné si stáhnout i danou knihovnu a podrobný příklad použití. Pro úplnost ještě link na knihovnu pngFix.zip.
Žádné komentáře:
Okomentovat