Created
April 14, 2011 08:20
-
-
Save johnantoni/919122 to your computer and use it in GitHub Desktop.
Supersleight jQuery Plugin for Transparent PNGs in IE6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery.fn.supersleight = function(settings) { | |
settings = jQuery.extend({ | |
imgs: true, | |
backgrounds: true, | |
shim: 'x.gif', | |
apply_positioning: true | |
}, settings); | |
return this.each(function(){ | |
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) { | |
jQuery(this).find('*').andSelf().each(function(i,obj) { | |
var self = jQuery(obj); | |
// background pngs | |
if (settings.backgrounds && self.css('background-image').match(/\.png/i) !== null) { | |
var bg = self.css('background-image'); | |
var src = bg.substring(5,bg.length-2); | |
var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale'); | |
var styles = { | |
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')", | |
'background-image': 'url('+settings.shim+')' | |
}; | |
self.css(styles); | |
}; | |
// image elements | |
if (settings.imgs && self.is('img[src$=png]')){ | |
var styles = { | |
'width': self.width() + 'px', | |
'height': self.height() + 'px', | |
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')" | |
}; | |
self.css(styles).attr('src', settings.shim); | |
}; | |
// apply position to 'active' elements | |
if (settings.apply_positioning && self.is('a, input') && (self.css('position') === '' || self.css('position') == 'static')){ | |
self.css('position', 'relative'); | |
}; | |
}); | |
}; | |
}); | |
}; |
Hi, I found one problem: when I put inline it it creates both image with a transparent background and alt (or img name if there is no alt) text as the image doesn't exist. Why there is something like that? Here is the picture: http://snag.gy/7Eikr.jpg (at the bottom there is a semi transparent background and it works correctly; the picture is from IE7, but the same in IE6, 8...)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
another way is to save images as 8-bit PNGs, which should provide a workable solution without need of the plugin although may appear a little fuzzy