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