Making transparent png's in internet explorer

[Mercifull]

Ok so i was experimenting today and managed to get png's to work in internet explorer

 

 

 

 

 

 

 

Here is the proof of concept page. Sorry if i stole your sig to prove it :P

 

 

 

http://geocities.com/matt_sims101/pngtest.html

 

 

 

 

 

 

 

It uses a .js file to see if the browser is internet explorer and places png_fix.gif (a blank stransparent gif) in place of the alpha layer.

 

 

 

Png files are unaffected in opera and firefox but in ie the change is miraculous

 

 

 

 

 

 

 

Simply create a new file called png_fix.js in notepad and paste the following

 

 

 

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {



document.writeln('');



window.attachEvent("onload", fnLoadPngs);



}







function fnLoadPngs() {



var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');



var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);







for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {



if (itsAllGood && img.src.match(/\.png$/i) != null) {



var src = img.src;



img.style.width = img.width + "px";



img.style.height = img.height + "px";



img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"



img.src = "png_fix.gif";



}



img.style.visibility = "visible";



}



}

 

 

 

 

 

 

 

Then at the top of every page use this line in the html

 

 

 

 

 

 

 

 

 

 

The blank gif is available here just right click save as.

 

 

 

 

 

 

 

One you have done this pngs will work perfect in all browsers and you can simply use them just like any other kind of image.

 

 

 

 

 

 

 

Maybe if we are lucky the admins will add this to this forum ;) Then all you IE users can see our pretty sigs

[Mercifull]

Also it would be good if other people could test this on their own sites. I want to see if this works flawlessly :D

[Phantium]

I'll test it on my webserver in a few.

[Demoris]

Awesome job. I tested it on my webspace, and it works.

 

 

 

 

 

 

 

http://www.clearphp.com/demoris/pngfixtest.html

 

 

 

 

 

 

 

 

 

 

 

Wow. Thats great. I've never used png's much before because of Internet Explorer, but now I can. Sweet.

 

 

 

 

 

 

 

How exactly did you manage to figure this out?

[Mercifull]

I used a similar js script to resize images and i was reading up on ways to make transparent png's in IE and found a really helpful site explaining a way of doing it. Just modified it a bit to work and bam :P