IE6 PNG Transparency Fix with Javascript

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.

// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanksfunction fixPNG(){
 
 $$('*').each(function(el){
 
 	var imgURL = el.getStyle('background-image');
 
 	var imgURLLength = imgURL.length;
 
 	if ( imgURL != 'none' &amp;&amp; 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' &amp;&amp; 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 <img> tags and replace them with <input> (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

Tags: AlphaImageLoader, bug, ie6, JavaScript, Mootools, png, transparency

Hey, it seems that you are using AdBlocking software just like me.
However I tend to disable it for small blogs like this one. If you would like to help me pay for my webhosting please allow your Adblocking software to show adverts from this site. Thanks!

This entry was posted on Wednesday, October 3rd, 2007 at 4:29 pm and is filed under Internet Explorer. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses to “IE6 PNG Transparency Fix with Javascript”

Dimitar Christoff Says:
November 8th, 2007 at 5:03 pm
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.
Dimitar Christoff Says:
November 9th, 2007 at 12:38 am
you may also want to cover things like align/float and cloneEvents(el) before you replace…
Peter Says:
November 9th, 2007 at 11:19 am
true it may be done a lot more generic

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

Thanks for the input (мерси – жив и здрав)
Peter Says:
November 13th, 2007 at 1:07 am
Dimitar, there is a refactored version of the script. Here is more info

http://blog.creonfx.com/internet-explorer/ie6-png-transparency-fix-with-javascript-v20
Dimitar Christoff Says:
November 27th, 2007 at 8:02 pm
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 | http://www.webtogs.co.uk
Peter Says:
November 28th, 2007 at 1:26 pm
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
venelin Says:
November 28th, 2007 at 7:26 pm
towa neshto raboti li s 24bit png prilojeni kato background repeat-x ili y?
Romain Says:
December 5th, 2007 at 7:31 pm
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 ?
Peter Says:
December 9th, 2007 at 11:26 pm
@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
John Says:
April 10th, 2008 at 3:59 pm
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.

for example

Can you help me please…
Peter Says:
April 10th, 2008 at 11:37 pm
@John put the link again, because currently there are only <a>’s.

Anyway the fix for this bug is using position relative of the inner element
Sven Says:
June 18th, 2009 at 6:05 pm
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….
Regnak Says:
February 16th, 2010 at 7:01 pm
Version with 1.2 of mootools

// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks

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)
};
});
}

Peter Velichkov's Blog

IE6 PNG Transparency Fix with Javascript

13 Responses to “IE6 PNG Transparency Fix with Javascript”

Leave a Reply