PDA

View Full Version : PNG Transparency in IE


primexx
02-25-2006, 06:20 AM
Ok, this is the code that enables PNG transparency in IE... // Universal transparent-PNG enabler for MSIE/Win 5.5+
// http://dsandler.org
// From original code: http://www.youngpup.net/?request=/snippets/sleight.xml
// and background-image code: http://www.allinthehead.com/retro/69
// also:
// * use sizingMethod=crop to avoid scaling PNGs (who would do such a thing?)
// * only do this once, to make it compatible with CSS rollovers

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);
}

function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('/images/spacer.gif')";
obj.style["background-position"] = offset; // reapply
} else if (img && 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='crop')"
img.src = "/images/spacer.gif";
}

}
}
}

HOWEVER, CSS background images DO NOT DISPLAY! This is driving me crazy! any solution to this problem? THANKS!

site: http://members.shaw.ca/primexx/

Skyzyx
02-25-2006, 07:24 AM
http://allinthehead.com/retro/69/sleight-of-hand

primexx
02-25-2006, 07:35 AM
I just tried that code but it's not working, the images are still not displaying, any ideas why? Thanks!

Skyzyx
02-25-2006, 07:43 AM
You used the actual bgsleight.js (http://www.allinthehead.com/code/samples/bgsleight.js), right? I've never had any problems with it before. Maybe if you showed us some of the actual code your working with (where the images would be applied)...

primexx
02-25-2006, 08:32 AM
Oh I figured it out, it's probably my firewall or something because viewing the local file works while the remote one doesnt. ThANKS!