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

Tags: , , , , , ,

13 Responses to “IE6 PNG Transparency Fix with Javascript”

  1. Dimitar Christoff Says:

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

  2. Dimitar Christoff Says:

    you may also want to cover things like align/float and cloneEvents(el) before you replace…

  3. Peter Says:

    true it may be done a lot more generic

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

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

  4. Peter Says:

    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

  5. Dimitar Christoff Says:

    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. Peter Says:

    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

  7. venelin Says:

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

  8. Romain Says:

    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 ?

  9. Peter Says:

    @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

  10. John Says:

    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…

  11. Peter Says:

    @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

  12. Sven Says:

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

  13. Regnak Says:

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

Leave a Reply