Supersleight jQuery Plugin for Transparent PNGs in IE6

supersleight.plugin.js

jQuery.fn.supersleight = function(settings) {
	settings = jQuery.extend({
		imgs: true,
		backgrounds: true,
		shim: 'x.gif',
		apply_positioning: true
	}, settings);
	
	return this.each(function(){
		if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) {
			jQuery(this).find('*').andSelf().each(function(i,obj) {
				var self = jQuery(obj);
				// background pngs
				if (settings.backgrounds && self.css('background-image').match(/\.png/i) !== null) {
					var bg = self.css('background-image');
					var src = bg.substring(5,bg.length-2);
					var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale');
					var styles = {
						'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
						'background-image': 'url('+settings.shim+')'
					};
					self.css(styles);
				};
				// image elements
				if (settings.imgs && self.is('img[src$=png]')){
					var styles = {
						'width': self.width() + 'px',
						'height': self.height() + 'px',
						'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')"
					};
					self.css(styles).attr('src', settings.shim);
				};
				// apply position to 'active' elements
				if (settings.apply_positioning && self.is('a, input') && (self.css('position') === '' || self.css('position') == 'static')){
					self.css('position', 'relative');
				};
			});
		};
	});
};

You apply it to a section of the page like this:

$('#content').supersleight();

Of course, if you wanted to fix PNGs for the entire page, you can just apply it to the body element. For all sorts of reasons, it’s better to be specific if you can.

$('body').supersleight();

This can be safely reapplied after importing a chunk of HTML via an Ajax request (something I end up doing a lot), and it uses jQuery’s browser detection to only apply it to the appropriate versions of IE, so it’s safe to deploy for everything, or to include inside some Conditional Comments as you prefer.

As always, the script requires the path to a transparent GIF shim image. By default, and almost by tradition with this script, that’s x.gif, but you can specify any image you like:

$('body').supersleight({shim: '/img/transparent.gif'});

Other possible configuration values are imgs and backgrounds (both boolean, default true) to tell the script which PNGs to fix up, and apply_positioning (boolean, default true) to tell the script not to try and fix up some of the bugs around unclickable links. (See the 24ways article for more info on that).

http://allinthehead.com/retro/338/supersleight-jquery-plugin
http://24ways.org/2007/supersleight-transparent-png-in-ie6

another way is to save images as 8-bit PNGs, which should provide a workable solution without need of the plugin although may appear a little fuzzy

Hi, I found one problem: when I put inline it it creates both image with a transparent background and alt (or img name if there is no alt) text as the image doesn't exist. Why there is something like that? Here is the picture: http://snag.gy/7Eikr.jpg (at the bottom there is a semi transparent background and it works correctly; the picture is from IE7, but the same in IE6, 8...)