ドキュメント

Tutorials:PNG Opacity Fix for IE6

From jQuery JavaScript Library

Jump to: navigation, search

How to make transparent PNGs possible in Internet Explorer 6

Original: http://docs.jquery.com/Tutorials:PNG_Opacity_Fix_for_IE6
Author: Timo Besenreuther


Contents

The Problem

Internet Explorer 6 is still one of the major browsers, but it doesn't let us enjoy the possibilities of transparent PNGs.


The Goal

What I want to do, is to create a script, that makes all the PNGs, that are already on the page, transparent. I'll do that using jQuery.


The Solution

Ok, let's do it!

First, we need to check, whether the client browser is IE 6 (or 5.5) on Windows. Of course, we use the $(document).ready() function.

 $(document).ready(function() {
   var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
   if (badBrowser) {
     // later code goes here
   }
 }

Now, we need to find all PNGs on the page. The selector to do so could look like this:

 img[src$=.png]

That gives us all the images on the page, who have a src attribute, that ends in .png.

 $(document).ready(function() {
   var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
   if (badBrowser) {
     // get all pngs on page
     $('img[src$=.png]').each(function() {
       fixPng(this);
     });
   }
 });

This code calls the function fixPng for every PNG on the page. Later, I will explain, why I declare this extra function. First, let's have a look at the function itself. The PNGs are replaced by transparent GIFs, and we use a Microsoft Filter to get our original image back. This filter supports opacity, and our problem is solved...

 var blank = new Image();
 blank.src = 'images/blank.gif';
 
 function fixPng(png) {
   // get src
   var src = png.src;
   // set width and height
   if (!png.style.width) { png.style.width = $(png).width(); }
   if (!png.style.height) { png.style.height = $(png).height(); }
   // replace by blank image
   png.src = blank.src;
   // set filter (display original image)
   png.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
 }

First, we store the original image in the variable src. The filter needs width and height to be set, so we check, whether the information is available. If not, we use jQuery to find it out. After doing that, we replace the image by a blank gif, and apply the filter with the original source of the image.

Technically, this solution looks quite good, but there is still a problem: If the images are not loaded, yet, jQuery can't find out the width and height. So we need to check that in the first function. Instead of simply calling fixPng, we do the following:

 if (!this.complete) {
   this.onload = function() { fixPng(this) };
 } else {
   fixPng(this);
 }

If the image is already loaded, we manipulate it. If it ist not loaded, yet, we manipulate it as soon as it is.

"this" points to the PNG, because the code is inserted inside the each() function, that parses the images.

Adding the onload event creates another problem. When the image ist replaced by the transparent gif, the event is fired again. We can avoid that by adding the line

 png.onload = function() { };

to the fixPng() function.

In the end the code looks like this:

 var blank = new Image();
 blank.src = 'images/blank.gif';
 
 $(document).ready(function() {
   var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
   if (badBrowser) {
     // get all pngs on page
     $('img[src$=.png]').each(function() {
       if (!this.complete) {
         this.onload = function() { fixPng(this) };
       } else {
         fixPng(this);
       }
     });
   }
 });
 
 function fixPng(png) {
   // get src
   var src = png.src;
   // set width and height
   if (!png.style.width) { png.style.width = $(png).width(); }
   if (!png.style.height) { png.style.height = $(png).height(); }
   // replace by blank image
   png.onload = function() { };
   png.src = blank.src;
   // set filter (display original image)
   png.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
 }

That's it. It wasn't too hard, was it?

To use the code, you simply have to include it in your website (of course, jquery needs to be included first). Don't forget to upload the blank gif (transparent, 1 x 1px), and to adjust its path.


Why jQuery

As I mentioned earlier, there are heaps of PNG hacks around, so why write a new one using jQuery?

One reason to do so, is, that the $(document).ready() function is called just at the right time to do the manipulation. Another reason is, that jQuery makes it very easy to find and parse all the PNGs on the page.

But in my opinion, the main reason is simply, because it's lots of fun to work with jQuery!