I was just digging through some old code, and came across a simple modification I made some time ago to jQuery’s iFixPNG plugin by Khurshid. I added the ability to pass AlphaImageLoader’s sizingMethod parameter to the .ifixpng() method, which lets the user optionally specify which mode (‘scale’, ‘image’ or ‘crop’) the filter will use. Specifying the ‘scale’ mode can be especially useful if you have an element with a single-axis repeating background image — with css something like:
Select Code
1
2
3
4
5
6
div.horizontal-bar {
    background-image: url('vertical-gradient.png');
    background-repeat: repeat-x;
    height: 10px;
    width: 100%;
}
which produces something like:
Keeping in mind that the background image is only 1px wide, stretching the image to the element’s full width using IE’s AlphaImageLoader (via iFixPNG) produces an identical result to css repeat-x.
Select Code
1
$('div.horizontal-bar').ifixpng('scale');
Here’s the plugin:
Select Code
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/*
 * jQuery ifixpng plugin
 * (previously known as pngfix)
 * Version 2.1  (23/04/2008)
 * @requires jQuery v1.1.3 or above
 *
 * Examples at: http://jquery.khurshid.com
 * Copyright (c) 2007 Kush M.
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 * Modified by Mike Marcacci <http://liveintensely.com> to include sizingMethod parameter
 * 
 */
 
 /**
  *
  * @example
  *
  * optional if location of pixel.gif if different to default which is images/pixel.gif
  * $.ifixpng('media/pixel.gif');
  *
  * $('img[@src$=.png], #panel').ifixpng();
  *
  * @apply hack to all png images and #panel which icluded png img in its css
  *
  * @name ifixpng
  * @type jQuery
  * @cat Plugins/Image
  * @return jQuery
  * @author jQuery Community
  */
 
(function($) {

    /**
     * helper variables and function
     */
    $.ifixpng = function(customPixel) {
        $.ifixpng.pixel = customPixel;
    };
    
    $.ifixpng.getPixel = function() {
        return $.ifixpng.pixel || '/images/pixel.gif';
    };
    
    var hack = {
        ltie7  : $.browser.msie && $.browser.version < 7,
        filter : function(src, sizingMethod) {
            return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=" + sizingMethod + ",src='" + src + "')";
        }
    };
    
    /**
     * Applies ie png hack to selected dom elements
     *
     * $('img[@src$=.png]').ifixpng();
     * @desc apply hack to all images with png extensions
     *
     * $('#panel, img[@src$=.png]').ifixpng();
     * @desc apply hack to element #panel and all images with png extensions
     *
     * @name ifixpng
     */
     
    $.fn.ifixpng = hack.ltie7 ? function(sizingMethod) {
        sizingMethod = sizingMethod || 'crop'; // can be 'crop', 'image', or 'scale'
        return this.each(function() {
            var $$ = $(this);
            // in case rewriting urls
            var base = $('base').attr('href');
            if (base) {
                // remove anything after the last '/'
                base = base.replace(/\/[^\/]+$/,'/');
            }
            if ($$.is('img') || $$.is('input')) { // hack image tags present in dom
                if ($$.attr('src')) {
                    if ($$.attr('src').match(/.*\.png([?].*)?$/i)) { // make sure it is png image
                        // use source tag value if set 
                        var source = (base && $$.attr('src').search(/^(\/|http:)/i)) ? base + $$.attr('src') : $$.attr('src');
                        // apply filter
                        $$.css({filter:hack.filter(source, sizingMethod), width:$$.width(), height:$$.height()})
                          .attr({src:$.ifixpng.getPixel()})
                          .positionFix();
                    }
                }
            } else { // hack png css properties present inside css
                var image = $$.css('backgroundImage');
                if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
                    image = RegExp.$1;
                    image = (base && image.substring(0,1)!='/') ? base + image : image;
                    $$.css({backgroundImage:'none', filter:hack.filter(image, sizingMethod)})
                      .children().children().positionFix();
                }
            }
        });
    } : function() { return this; };
    
    /**
     * Removes any png hack that may have been applied previously
     *
     * $('img[@src$=.png]').iunfixpng();
     * @desc revert hack on all images with png extensions
     *
     * $('#panel, img[@src$=.png]').iunfixpng();
     * @desc revert hack on element #panel and all images with png extensions
     *
     * @name iunfixpng
     */
     
    $.fn.iunfixpng = hack.ltie7 ? function() {
        return this.each(function() {
            var $$ = $(this);
            var src = $$.css('filter');
            if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) { // get img source from filter
                src = RegExp.$1;
                if ($$.is('img') || $$.is('input')) {
                    $$.attr({src:src}).css({filter:''});
                } else {
                    $$.css({filter:'', background:'url('+src+')'});
                }
            }
        });
    } : function() { return this; };
    
    /**
     * positions selected item relatively
     */
     
    $.fn.positionFix = function() {
        return this.each(function() {
            var $$ = $(this);
            var position = $$.css('position');
            if (position != 'absolute' && position != 'relative') {
                $$.css({position:'relative'});
            }
        });
    };

})(jQuery);