Comments on: IE6 PNG Transparency Fix with Javascript

By: Regnak

Regnak — Tue, 16 Feb 2010 16:01:05 +0000

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

By: Sven

Sven — Thu, 18 Jun 2009 15:05:40 +0000

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….

By: Peter

Peter — Thu, 10 Apr 2008 20:37:48 +0000

@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

By: John

John — Thu, 10 Apr 2008 12:59:05 +0000

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...

By: Peter

Peter — Sun, 09 Dec 2007 20:26:17 +0000

@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

By: Romain

Romain — Wed, 05 Dec 2007 16:31:37 +0000

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 ?

By: venelin

venelin — Wed, 28 Nov 2007 16:26:49 +0000

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

By: Peter

Peter — Wed, 28 Nov 2007 10:26:33 +0000

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

By: Dimitar Christoff

Dimitar Christoff — Tue, 27 Nov 2007 17:02:45 +0000

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

By: Peter

Peter — Mon, 12 Nov 2007 22:07:22 +0000

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