728b.gif

Jak na průhledné png v Internet Exploreru 6 – pomocí jQuery.ifixpng

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

Průhlednost v IE 6Pod předešlým článkem na stejné téma se rozhořela diskuse kolem metody využívající populární javascriptovou knihovnu jQuery. Ta slibovala velmi jednoduchý způsob, jak rozchodit průhlednost formátu PNG v IE6 a 5.5.

Bohužel se ukázalo, že to není tak jednoduché, jak se zpočátku zdálo. Zabýval jsem se tedy problémem do hloubky a v následujícím článku se dozvíte, co všechno tato metoda umožňuje a co ne. V první řadě bych řád zdůraznil, že javascript z minulého článku jQuery.pngFix se přejmenoval na jQuery.ifixpng. Takže si projdeme znovu, jak tuto metodu použít:

  1. Stáhněte si nejnovější jQuery knihovnu ze stránek jquery.com. Stáhněte verzi Minified and Gzipped.
  2. Stáhněte skript jquery.ifixpng.
  3. Budeme potřebovat tzv. gem, tedy průhledný GIF 1×1px. Stahujte zde.
  4. Do své stránky vložíme odkazy na oba dva skripty
    <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="jquery.ifixpng.js"></script>
  5. Skripty zavoláme na dokument ready, následující jQuery syntaxí:
    <script type="text/javascript">
      $(document).ready(function(){
          // aplikuje průhlednost na všechny obrázky s příponou .png (elementy IMG)
          $('img[@src$=.png]').ifixpng();
          // aplikuje průhlednost na element div s ID pruhledne
          $('div#pruhledne').ifixpng();
          // aplikuje průhlednost na element div s ID odkazy
          $('div#odkazy').ifixpng();
          // kombinace obojího
          $('img[@src$=.png], div#odkazy').ifixpng();
        });
    </script>

  6. V souboru jquery.ifixpng.js změnte cestu k vašemu gemu (1×1px průhledný gif).
    $.ifixpng.getPixel = function() {
        return $.ifixpng.pixel || 'gem.gif';
    };
  7. Hotovo! Ukázkový příklad můžete vidět zde.

Co nefunguje

  • Nefunguje opakující se pozadí.
  • Pozadí může mít pouze defaultní pozici top left. Nelze ji měnit. Nefunguje tudíž finta s posouváním obrázku na pozadí odkazů.
  • Pokud je prvek částečně, nebo úplně zakryt jiným elementem, celá věc nefunguje.
  • Odkazy v elementu, který má na pozadí průhledný obrázek fungují v IE6 zvláštně. První 2 jsou bez problému, ale další reagují na stisk asi jen do 2/3 jejich textu.

Domovskou stránku celého projektu naleznete zde. Další metoda pro zprůhlednění PNG obrázků v IE6 založená na jiném principu v předchozím článku. Jakékoli dotazy směrujte do komentářů.

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ěď