PNG Transparency for Internet Explorer

Ever wanted to allow your users to see transparent PNG images using Internet Explorer? Now you can!

[high]Note:[/high] I did NOT create this script, it remains the sole property of it's author.


Pros & Cons

Pros:

• Ignored as a comment in other browsers, so no browser-sniffing code is required
• Works with (X)HTML Strict & Transitional Doctypes
• Does not break W3C validation
• Lightweight and very easily deployed
• Works with existing in-line or external CSS rules based on class or ID selectors
• Works with old-style img align="left" or align="right" attributes
• Adds itself to the end of any existing Body Onload code
• Works with imagemaps and input images using a special version

Cons:

• Doesn't work in IE versions earlier than 5.5
• Requires JavaScript to be enabled - the estimations for how many people choose not to use JS vary wildly.
• CSS backround PNGs not supported - experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs, but then background-repeat would not work, and anchors placed over non-transparent parts of the image were not clickable :-(
• CSS rules for the PNG images based on the img selector are lost, but this is easily rectified by adding a class selector to your img rule such that img{..} becomes img,.png{..} - then add the attribute class="png" to each of your PNGs.

To install, simply upload the attached .js file to your /forums/clientscript/ directory.

Then edit your headinclude template, and add the following:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="clientscript/vbulletin_pngfix.js"></script>
<![endif]-->

You're all set.!

[Dan]

Nice idea I've been looking for that css code recently so thanks

[bigcurt]

Thanks a MILLION oblivion, you rock. I like your site alot too man. Anyway

/me installs

[Bad Bunny]

Originally Posted by bigcurt

Thanks a MILLION oblivion, you rock. I like your site alot too man. Anyway

[high]* bigcurt installs[/high]

It seems there was one already made to do this, but yours is significantly easier. No hacking is a big plus.

[Oblivion Knight]

Originally Posted by Bad Bunny

It seems there was one already made to do this, but yours is significantly easier. No hacking is a big plus.

That, and I couldn't get theirs to work at all..

[jugo]

Mine works greate..WooHOo!!!

Thanks!!

[Bad Bunny]

Originally Posted by Oblivion Knight

That, and I couldn't get theirs to work at all..

My site has theirs working, while my dev has yours. My issue right now is I have a mac with no pc to test it on. So I'll never really know if it does or doesn't work. heh

[devilsmania]

added it, but i have a problem....

while it recognizes the icons (*png) it wont render the Attached Avatars (and i find it important)

anything to modify into that .js file ? like instead of searching .png, it could find strings like image.php ?

[Oblivion Knight]

Not likely, because it would try to render .jpg and .gif attachments as .png's also.

[Dark Zero]

for solution that i only add the .png termination with script for the avatars