Sunday, September 12, 2010

Displaying PNG images in IE-6

Till date Internet explorer is still the most widely used browser since it comes with MS Windows.

So many web-designers are concerned with the problem of displaying PNG images in IE-6 or previous versions. It gives transparency thus it is required at many places.

The problem can be fixed by a clever use of JavaScript.

Follow these steps in order to get perfect results:

Suppose you have an image ABC.PNG

Step 1: Download a js file of DD_belatedPNG_0.0.8a.js from

http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

Step 2: write a small file with the name ie-fix.js and content

DD_belatedPNG.fix('.png,.name');

Step 3: Step 1: Create a span tag wherever u want to put your image and give its class as class="png"

Eg :

Step 4: Put your image as background image of this id.

Eg: #abc{

Background-image:url(‘…/abc.png’);

}

Done!

Reference: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Inspire:Learn:Contribute

No comments:

Post a Comment