Hi,
> I've wrote very simple JQuery IE PNG hack plugin.
> Would like to know your professional opinion, to make it better
Great idea.
Generally you can set the filter for the img tag as well, you just need a
fully transparent gif (or png) for the src.
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return false;
this.each(function() {
var t = $(this);
var url = t.attr('src');
t.css({
'filter':
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"',sizingMethod='scale')'
}).attr({src:jQuery.IEPNGHack.emptygif});
});
};
jQuery.IEPNGHack = {
emptygif = 'empty.gif';
}
$(document).ready(function(){
jQuery.IEPNGHack.emptygif =
'http://example.com/design/images/empty.gif';
$('[EMAIL PROTECTED]').IEPNGHack();
});
You might also whant to fix IE for background-images:
jQuery.fn.IEPNGHack = function() {
if (!$.browser.msie) return false;
this.filter('[EMAIL PROTECTED]').each(function() {
var t = $(this);
var url = t.attr('src');
var w = t.width(); // width and height might be implicit
var h = t.height();
t.css({ // have not tested if this works theoretically it
should
filter:
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"',sizingMethod='scale')'
}).attr({src:jQuery.IEPNGHack.emptygif}).width(w).height(h);
}).end().not('[EMAIL PROTECTED]')
.filter('img')
.not('[EMAIL
PROTECTED]'+jQuery.IEPNGHack.emptygif+']').css({filter:none})
.end()
.end().not('img').each(function() {
var t = $(this);
var url = t.css('background-image');
if( url.search(/[.]png$/) >= 0 ) t.css({
filter:
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"',sizingMethod='scale')",
'background-image': 'none'
}); else t.css({filter: 'none'});
});
};
$(document).ready(function(){
$('.hasSomePngSomewhere').IEPNGHack();
});
Note, that this background-image hack only works for 1x1 pixel PNGs. In most
other cases, you won't be able to use the content of the Element you have set
a transparent PNG for.
It could be fixed by inserting an element with "position" set to "absolute",
resize it to the size of the whole element and set the filter for it. But if
you try to use that for structured semitransparent background you also have
the problem, that AFAIK there is no sizingMethod that behaves like the css
background-feature. Setting it to "scale" is OK for a homogenous background.
BTW: This function can be called again and again for all images - at least
theoretically, I have not tested it.
Christof
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
