As always when I need to use some transparent images cursing Internet Explorer 6 is inevitable so i wrote a quick javascript fix. Again mootools was the preferred framework because the ease of use.

function fixPNG(){

 $$('*').each(function(el){

 	var imgURL = el.getStyle('background-image');

 	var imgURLLength = imgURL.length;

 	if ( imgURL != 'none' && imgURL.substring(imgURLLength  - 5, imgURLLength  - 2) == 'png'){

 		el.setStyles({

 			background: '',

 			filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"

 		});

 	};

if(el.getTag() == 'img' && el.getProperty('src').substring(el.getProperty('src').length  - 3) == 'png'){

 		var imgReplacer = new Element('input', {

 			'styles': {

 				'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + el.getProperty('src') + "')",

 				'position': 'relative',

 				'background': 'transparent'

 			},

 			'title': el.getProperty('alt')

 		});

imgReplacer.setStyles(el.getStyles('padding','margin','border','height','width'));

 		imgReplacer.setProperties(el.getProperties('id','class'));

 		imgReplacer.disabled = true;

 		el.replaceWith(imgReplacer);

 	};

 });

}

if(window.ie6){

 window.addEvent('domready', fixPNG);

}

Fix description: First I’m looking for all tags that have background-image style and replace it with Microsoft AlphaImageLoader filter, then I search for all tags and replace them with (img src used for style background image again using the MS filter). I used input since it is inline element but still has height and width – like the img tag.

PS. If you use any links in area with PNG used for bg put the links in div with style=”position:relative” else they will not be clickable due to the MS filters

and as always example: IE6 PNG Transparency Fix with JavaScript

Comments

Comment by Dimitar Christoff on 2007-11-08 17:03:59 +0300

awesome work :) i took your original source and modded it a little although this is not going to cater for background images, not everyone needs them.

// all image tags with a src property ending on png…
$$(‘img[src$=png]’).each(function(el) {
el.replaceWith(new Element(‘input’, {
‘styles’: {
‘filter’: “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’crop’, src=’” + el.getProperty(‘src’) + “‘)”,
‘position’: ‘relative’,
‘background’: ‘transparent’
},
‘title’: el.getProperty(‘alt’)
}).setStyles(el.getStyles(‘padding’,’margin’,’border’,’height’,’width’)).
setProperties(el.getProperties(‘id’,’class’)).setProperty(“disabled”, “true”));
}); // each

thanks, благодаря etc. :)

Comment by Dimitar Christoff on 2007-11-09 00:38:53 +0300

you may also want to cover things like align/float and cloneEvents(el) before you replace…

Comment by Peter on 2007-11-09 11:19:18 +0300

true it may be done a lot more generic

anyway this is great $$(’img[src$=png]’).each(function(el)

Thanks for the input (мерси – жив и здрав)

Comment by Peter on 2007-11-13 01:07:22 +0300

Dimitar, there is a refactored version of the script. Here is more info

Comment by Dimitar Christoff on 2007-11-27 20:02:45 +0300

peter: yeah, i was the refactored version is nice but it was not quite suitable for my needs…

if we ignore the isvisible / hide stuff…

a lot of the pngs have events attached to them, eg, “click” or “mouseenter”. additionally, i have instances where i use $(“imageid”).fireEvent(“click”) from another method or function and this also fails to work… and some have opacity values that fail to get copied…

in other words, we ended up using a modded version of the script, like a hybrid between yours… here is an example with mouseenter events attached to the pngs: http://dci.uk.net/pngfix.php

regards,
—
dimitar

Comment by Peter on 2007-11-28 13:26:33 +0300

ok great. I’m glad when i can help

i agree that for each specific project there should be modifications that are not
currently included

Cheers

Comment by venelin on 2007-11-28 19:26:49 +0300

towa neshto raboti li s 24bit png prilojeni kato background repeat-x ili y?

Comment by Romain on 2007-12-05 19:31:37 +0300

Hi, I’ve looked at lot of different fixes for the png IE6 problem. And everytime I’m bummed by the fact that you can’t do a background-position with a background png image. Does the background-position work with this fix ?

Comment by Peter on 2007-12-09 23:26:17 +0300

@Venelin please write in EN so everyone can understand it.

@Romain : Try this one http://blog.creonfx.com/internet-explorer/ie6-png-transparency-css-background-repeat-fix

Comment by John on 2008-04-10 15:59:05 +0300

Very good job . Its very good, but I have a small problem , when I put a png in a link and I have a background image (both images are .png) link doesn’t work. Can you help me please…

Comment by Peter on 2008-04-10 23:37:48 +0300

@John put the link again, because currently there are only ’s.

Anyway the fix for this bug is using position relative of the inner element

Comment by Sven on 2009-06-18 18:05:40 +0300

I found your solution, but it doesn’t work like I expected. So I searched along and found this awesome solution:

http://www.dillerdesign.com/experiment/DD_belatedPNG

This is the best solution for PNGs in IE6….

Comment by Regnak on 2010-02-16 19:01:05 +0300

Version with 1.2 of mootools

function fixPNG(){
$$(‘img.pngtofix’).each(function(el) {
var imgURL = el.getStyle(‘background-image’);
var imgURLLength = imgURL.length;

if ( imgURL != ‘none’ && imgURL.substring(imgURLLength – 5, imgURLLength – 2) == ‘png’){
el.setStyles({
background: ”,
filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’crop’, src=’” + imgURL.substring(5,imgURLLength – 2) + “‘)”
});
};

if(el.get(‘tag’) == ‘img’ && el.getProperty(‘src’).substring(el.getProperty(‘src’).length – 3) == ‘png’){
var imgReplacer = new Element(‘input’, {
‘styles’: {
‘filter’: “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’crop’, src=’” + el.getProperty(‘src’) + “‘)”,
‘position’: ‘relative’,
‘background’: ‘transparent’
},
‘title’: el.getProperty(‘alt’)
});
imgReplacer.setStyles(el.getStyles(‘padding’,’margin’,’border’,’height’,’width’));
imgReplacer.setProperties(el.getProperties(‘id’,’class’));
imgReplacer.disabled = true;
imgReplacer.replaces(el)
};
});
}