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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | // 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' && 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 <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
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. :)
you may also want to cover things like align/float and cloneEvents(el) before you replace…
true it may be done a lot more generic
anyway this is great $$(’img[src$=png]’).each(function(el)
Thanks for the input (мерси – жив и здрав)
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
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
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
towa neshto raboti li s 24bit png prilojeni kato background repeat-x ili y?
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 ?
@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
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…
@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
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….
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)
};
});
}