Topic awaiting preservation: PNG.js library - Internet Explorer PNG workaround

http://www.schillmania.com/projects/png/

This page (currently very basic, but it works I guess..) provides a simple demo of this dynamic PNG replacement stuff I was tinkering with late last year ( as used in my SnowStorm project, http://www.schillmania.com/projects/snowstorm ).

I'm sure it has its share of bugs and drawbacks/limitations etc., but the benefit to this implementation is that the HTML code stays completely clean.

ie.

<img src="foo.gif" alt="" class="png" />

Is replaced with a PNG of the same name where supported, and under ie5.5:win32+ the proprietary dxalphaimagecrap() filters are applied to give the alpha transparency effect that the other browsers enjoy natively.

The other added benefits are, the GIF is replaced by PNG before the page has loaded (so the GIF does not load at all - no extra bandwidth use), and older browsers (presumably not supporting PNG) are left with GIFs instead of a broken (unsupported format) image icon.

I'm sure there are several (boo, hiss) bad points, but it's worked well for me. I've tried implementing the same for background images, although there are some limitations with this in IE again among other things - namely tiling (doesn't work as far as I know due to the filter.)


[This message has been edited by Scott (edited 02-03-2004).]

I actally prefer the way that youngpup does it.

He uses the png file in the src attribute and applies the active X filter to IE explicitly. Sure, it might break in non PNG supporting browsers, but AFAIK your going back as far as Netscape 4 before you have any issues (given that IE win 5+ can display PNG's with the active X filter)

This way you don't need an uneeded class and your have the proper file in the markup whre it belongs. Whilst your solution is nice, I think his way of doing things works better with the idea of XHTML. He also has a nifty rollover script that uses custom attributes in the img tag to specify the hover and down images sources which I thought was an fantastic idea. Pitty you have to extent the XHTML DTD to get it to validate, but the browsers don't seem to mind it in any case.

I've actually been using his script around the place for about a year now. I love PNG's, there's so many wonderfull uses for them.

I also played around with CSS background images and ran into the same limitation you did -- the filter stretches the alpha mask to the bounds of the element instead ot tiling it, which is a ripe pain. Hopefully the next version of IE will support them better (although I've been saying that for 3 freak'n years now!)

CSS background images as pngs in IE can be made to work very easily. Below are the scripts I use - one is youngpups and the background script is from youngpups site somewhere but by some other guy - I have combined it with youngpups in the last example which allows both background and foreground png images:

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

	window.attachEvent("onload", alphaBackgrounds);

}

function alphaBackgrounds(){

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

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

	for (i=0; i<document.all.length; i++){

		var bg = document.all[i].currentStyle.backgroundImage;

		if (itsAllGood && bg){

			if (bg.match(/\.png/i) != null){

				var mypng = bg.substring(5,bg.length-2);

				document.all[i].style.filter = "progid :DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";

				documen.all[i].style.backgroundImage = "url('images/null.gif')";

			}

		}

	}

}

That just does background images.

Or if you use both Background images and Normal images you can do this:

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

	window.attachEvent("onload", pngLoadPngs);



function pngLoadPngs()

{

	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.images.length; i++){

			pngLoad(document.images[i]);

		}	

		for (i=0; i<document.all.length; i++){

			var bg = document.all[i].currentStyle.backgroundImage;

			if (itsAllGood && bg){

				if (bg.match(/\.png/i) != null){

					var mypng = bg.substring(5,bg.length-2);

					document.all[i].style.filter = "progid :DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";

					document.all[i].style.backgroundImage = "url('images/null.gif')";

				}

			}

		}

	}

}

function pngLoad(img,src)

{

	if (typeof img == "object" && typeof img.tagName == "string" && img.tagName == "IMG")

	{

		if (typeof src == "string")

		{

			if (src.match(/\.png$/i) != null)

			{

				img.style.width = null;

				img.style.height = null;

				img.style.filter = null;

				img.src = src;

				pngSwapPrepare(img);

			}

			else

			{

				img.src = src;

			}

		}

		else if (img.src.match(/\.png$/i) != null)

		{

				pngSwapPrepare(img);

		}

	}

	function pngSwapPrepare(img)

	{

		if (img.complete)

			pngSwap(img);

		else

			img.attachEvent("onload",pngOnLoadSwap);

	}

	

	function pngOnLoadSwap()

	{

		event.srcElement.detachEvent("onload",pngOnLoadSwap);

		pngSwap(event.srcElement)

	}

	function pngSwap(img)

	{

		with (img)

		{

			style.width = width + "px";

			style.height = height + "px";

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

			src = "images/null.gif";

		}

	}

}

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit

With the background images actually, I found they don't have to stretch/scale to the size of the container - that's just the default behavior of the alphaimageloader() filter. You can specify "crop" in the render property or what have you, and the image will be displayed as a normal background() would.. the downside being it does not tile.

I ended up writing a lot of code to get the effect I wanted, but the upside is the images are replaced before the GIFs load, and the markup isn't messed up. I think this is one of those kind of things where people will debate it until the next big image format comes along, or IE finally gets native PNG support!