Transparent PNG not showing up in IE [works in Netscape]

**byte4byte** · 06-21-2006, 05:03 PM

Hello,

Has anyone else run into this problem? I see the graphic but, in IE, the transparent part is grey. I've found a resource that has proper code,

AlphaImageLoader

but I guess my problem is that my image is a background image. I can't seem to make this code work.

I also found code at another site:

<html>
<head></head>
<body bgColor="blue">

<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
filterrogidXImageTransform.Microsoft.AlphaImag eLoader(
src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>

and again, I don't know how to alter it to accomodate a background graphic.

Any advice?
Thanks in advance
b4b

**byte4byte** · 06-21-2006, 05:05 PM

by the way, 'just want to let you know I didn't put the emoticons in the above post... in case it's a site problem...

**LadynRed** · 06-21-2006, 05:15 PM

IE 6 (and below) does NOT support PNG transparency. IE 7, it appears, will.

You might try this article: http://www.alistapart.com/stories/pngopacity/

**byte4byte** · 06-21-2006, 06:30 PM

Thanks LadynRed... I'll let you know how it goes.

**Minaki** · 06-22-2006, 04:50 AM

Look for a script called Sleight. I use it on www.inoxia.co.uk to make transparent PNGs work properly.

**scottfree** · 06-22-2006, 09:03 AM

Just a suggestion.
Why not change the image into a gif, that's been supported all along.

**byte4byte** · 06-22-2006, 09:13 AM

Thanks Minaki, I checked out your link and the Sleight, but i don't know what is even supposed to go into a .js file... I need to do more research.

Scottfree, I would do that except I have a background image [Image1] of a lined object in a cell [no problem there], but then I have another partly transparent image [transparent in order to see the lined object below] [Image2] placed as a background image in a nested cell . Image 2 needs to be a background image because I need a text box placed in that same cell. My problem is I can't seem to find code for PNG's that relate to a backround image... but I'm still searchin through all the info you've all provided; thanks again!

**mgraphic** · 06-22-2006, 06:36 PM

Quote:

Originally Posted by scottfree

Just a suggestion.
Why not change the image into a gif, that's been supported all along.

GIF's only support one single channel of transparency, while PNG's support true alpha channel for gradient transparency. (8-bit I think)

**byte4byte** · 06-23-2006, 09:38 AM

Hello all,

Well, I couldn't figure it out, so I revised the layout of the site. Once the site is launched I'll post the url.

Thanks again for all your help!

**byte4byte** · 07-19-2006, 07:19 AM

Hello again... Here's the site. I built it without the transparent png; there wasn't enough time to figure it out and test it. But thank you so much for all your help.

**CouponGuy** · 03-05-2008, 09:11 AM

I was having the same problem. The sleight.js script was the perfect solution for me. In case you are not sure how to implement it, here's what I did:

I just put this code into a text file, and named it sleight.js:

Code:

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	document.writeln('<style type="text/css">img, input.PngInput { visibility:hidden; } </style>');
	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) {
			fnFixPng(img);
			img.attachEvent("onpropertychange", fnPropertyChanged);
		}
		img.style.visibility = "visible";
	}

	var nl = document.getElementsByTagName("INPUT");
	for (var i = nl.length - 1, e = null; (e = nl[i]); i--) {
		if (e.className && e.className.match(/\bPngInput\b/i) != null) {
			if (e.src.match(/\.png$/i) != null) {
				fnFixPng(e);
				e.attachEvent("onpropertychange", fnPropertyChanged);
			}
			e.style.visibility = "visible";
		}
	}
}

function fnPropertyChanged() {
	if (window.event.propertyName == "src") {
		var el = window.event.srcElement;
		if (!el.src.match(/x\.gif$/i)) {
			el.filters.item(0).src = el.src;
			el.src = "x.gif";
		}
	}
}

function dbg(o) {
	var s = "";
	var i = 0;
	for (var p in o) {
		s += p + ": " + o[p] + "\n";
		if (++i % 10 == 0) {
			alert(s);
			s = "";
		}
	}
	alert(s);
}

function fnFixPng(img) {
	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 = "/images/x.gif";
}

Then I added the following line to my HTML:

HTML Code:

<script type="text/javascript" src="sleight.js"></script>

Finally, I put a 1-pixel transparent GIF file named x.gif into a subdirectory named images.

That's all it took to fix it. Thanks for your help!