Wow Christof,
that heaps for such a detailed reply and explanation.
It will take me some time fully understand whole thing.
for now though, to get my project moving I've used part of your code to
come up with this, tested
http://www.nemoweb.com.au/jquery/IEPNGHack/take3.html
Feedback is appreciated
--Kush
Christof Donat wrote:
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
discuss@jquery.com
http://jquery.com/discuss/
--
Cheers,
Kush
Sensory Networks
Web Applications Developer
Direct: + 61 2 8302 2745
Phone: + 61 2 8302 2700
Fax: + 61 2 9475 0316
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
