728b.gif

Jak na průhledné PNG v Internet Exploreru 6 a 5.5?

19.04.08 19:48 | Tvorba webu | autor: Chates (profil) | Čteno: 4639x |
Nic mocUjde toPrůměrDobréVýborné (Žádná hodnocení)

Jak na průhlednost?I když je tento problém dávno vyřešen a mnoho z vás mě určitě obviní z nošení dříví do lesa, stále se setkávám webdesignéry, kteří se u svých návrhů zdráhají využít částečné průhlednosti. Takže bez dalších skrupulí následuje jednoduchý návod, jak zprovoznit onu obávanou částečnou průhlednost formátu PNG v Internet Exploreru 6 a 5.5.

Pro náš účel existuje samozřejmě metod víc, já zde uvedu dvě osvědčené. Jednu běžně užívanou a druhou méně známou novější. Obě mají své pro a proti. Kterou si vyberete, to už záleží na konkrétním projektu a samozřejmě na vás.

Metoda založená na jQuery

Co je to jQuery? jQuery je nová javascriptová knihovna, jejímž mottem je “Write less do more” neboli “Méně piš, dělej více”. Historie jQuery sahá do srpna roku 2006, kdy spatřila světlo obrazovek verze 1.0.

Tato metoda je zatím asi úplně nejjednodušší možnost, jak plně rozjet PNG obrázky ve starších Internet Explorerech. Proto jí mám tak rád. Hlavní nevýhoda spočívá v tom, že nefunguje, pokud má uživatel zakázaný javascript. Takže jak na to?

  1. Stáhněte si jQuery verzi Minified and Gzipped.
  2. Stáhněte si skript jquery.pngFix.
  3. Vložte do hlavičky vaší stránky odkazy na oba skripty
    ...
    
    
    ...
  4. Aktivujte skript na documentReady následujícími řádky:
    ...
    
    ...
  5. Hotovo!

Nyní fungují všechny obrázky typu PNG přesně tak, jak mají i v Internet Exploreru 6 a 5.5. Fungují jak obrázky na pozadí, tak obyčejné obrázky v elementu <img />. Toto je jediná metoda, která také umožňuje částečnou průhlednost u opakujícího se obrázku na pozadí, i když občas je to trošku máznuté. Jak jednoduché!

UPDATE: Pokud vám cokoli nefunguje, nebo máte s metodou problémy. Podrobnější informace naleznete v tomto článku.

Metoda využívající AlphaImageLoader

Co je to AlphaImageLoader? Je to filtr od společnosti Microsoft, který umožní zobrazení poloprůhledných PNG obrázků. Je zpřístupněn CSS vlastností filter. Ta bohužel není validní a jiný prohlížeč než Internet Explorer ji nepodporuje, takže je lepší umístit ji do zvláštního css souboru jen pro IE. Jak na to?

  1. Stáhněte si soubor iepngfix.htc. Soubor typu .htc (HTML Component) je napsán ve speciálním skriptovacím jazyce firmy Microsoft, kterému rozumí pouze prohlížeč Internet Explorer 4 a vyšší.
  2. Vytvořte, nebo si stáhněte tzv. gem. Jedná se o 1×1 px průhledný obrázek typu .gif (stahujte zde). V souboru iepngfix.htc je třeba změnit tento řádek:
    // This must be a path to a blank image. That's all the configuration you need.
    if (typeof blankImg == 'undefined') var blankImg = 'blank.gif'

    Místo blank.gif zadejte název vašeho gemu, nebo cestu k němu. Pozor! Cesta není od místa, kde je soubor uložen, ale od rootu.

  3. Vytvořte zvláštní css soubor pro Internet Explorer, nazvěte ho třeba ie.css a vložte do něj následující rádky:
    img, div {
    behavior: url(iepngfix.htc);
    }

    Vlastnost behavior nám umožní přiřadit nějakému selektoru (v našem případě img a div) jiný skript. Zavolá se tedy soubor iepngfix.htc, který za nás obstará starosti kolem alphaImageLoaderu a zajistí průhlednost všech png obrázků na stránce.

  4. Samozřejmě bychom rádi volali skript iepngfix jen pro Internet Explorer 6 a nižší. Využijeme starou známou fintu zvanou Conditional comments. Do hlavičky vašeho HTML dokumentu vložte následující řádky:
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie.css" media="screen"  />
    <![endif]-->

    Pro všechny moderní prohlížeče bude toto obyčejný komentář, ale pro IE6 a nižší to bude odkaz na css soubor ie.css

  5. A je hotovo! Samozřejmě toto bude fungovat jen pro prvky img a div (např. obrázky na pozadí).

Tato metoda je asi nejběžnější. Její hlavní výhodou je, že funguje vždy na rozdíl od první využívající jQuery. Další výhodou této metody je možnost zacílit pouze na některé prvky a využít skript iepngfix pouze na ty části stránky, na které je to třeba. Bohužel tato metoda nefunguje na opakující se pozadí formátu png a je složitější na implementaci.

Porovnání obou metod:

Metoda využívající jQuery

  • Velmi snadná implementace.
  • 100% validní kód.
  • Funguje i na opakující se pozadí formátu PNG.
  • Vyžaduje zapnutý javascript.

Metoda využívající AlphaImageLoader

  • Možnost zacílit kterýkoli prvek
  • Funguje bez javascriptu.
  • Složitější implementace.
  • Nutnost vytvořit nevalidní CSS.
  • Nefunguje na opakující se pozadí formátu PNG.
336b.gif

Líbil se ti tento článek? Ukaž ho i ostatním! Pro snadné přidání odkazu na Facebook, Linkuj.cz nebo Twitter klikni na jednu z ikonek výše a nech další, ať si článek také přečtou.

Zanechat odpověď