I’ve been working with Pngs over the last few weeks because they just look so much dang better. But then I went to setup IE6 support and some of my quick-hacks I used. If you’re not aware, to use transparent pngs in IE6 you need to set them as the background of say a <div> or <span> and then apply a filter to it. If we were to apply it in css it would look like this:
.myPng{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’/images/mysweet.png’);
}
However, to use only css to do this we _need_ to know the height and width of the image, because the filter actually just sets the background image. There’s a few other png hacks out there but none that really worked for me for various reasons. What I needed was something that was fast, lightweight, easy to read, and I could call it if I was building an <img> tag in javascript. So I made this:
Global = {
FixPng: function( img ){
if(document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’”+ img.src +”‘)”
} else {
img.style.visibility = “visible”
}
}
}
The only catch is that this relies on three things:
1. The <img> tag must have style=”visibility:hidden”
2. There must be a <div> tag wrapping the <img> tag. (the <div> tag can have styling)
3. The FixPng is called at some point passing the <img> tag object
So a normal fix would look like this:
<div><img src="/images/mysweet.png" style="visibility:hidden;" OnLoad="Global.FixPng( this );" /></div>
That’s about it. I don’t think this is my last iteration of this fix, but it works 100% better for me since I can easily use this in html and in javascript. I hope it helps you.
note: I’ve heard that the <img> OnLoad doesn’t always fire in IE6 because of caching. There’s workarounds, but if you have any insight, please post.
¡Hey! ¡Good script!
The only place where i can make an observation is the use of document.all to catch an IE.
Doesn’t work for me. The PNG disappears from view in all browsers. I replicated your steps exactly.
Hey what about the PNG images coming through css..is there any fix..this fix is not useful though as most of the background effects comes through css only
Interesting fix, I’ll try it
When i copied the Global object-code it came with “ insted of ” and ’ insted of ‘ etc etc.
Result=error.
Heres the code with right types of quotes (I hope):
Global = {
FixPng: function( img ){
if(document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’”+ img.src +”‘)”
} else {
img.style.visibility = “visible”
}
}
}
Ignore my previous
I guess your replacing ‘ and ” to remove sql-inj or whatnot.
But you should inform viewers of this, anyone not very good at js will bugg his brain out.
Tnks… this is the best and the small solution!
great globlay png fix solution, but it works only in font images can any css background globlay solution
BEST FIX…I’ve been looking for one for ages, had a lot of trouble implementing other fixes. This is great, nice one