Posted on by Peter

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.

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

13 Replies to “IE6 PNG Transparency Fix with Javascript”

  1. 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. :)

  3. true it may be done a lot more generic

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

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

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

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

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

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

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

Comments are closed.