pcblog.cz

(Žádná hodnocení)

Pod 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ářů.

Vyvěsit odkaz - networking