PNG Transparency for Internet Explorer

[Oblivion Knight]

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

Note: I did NOT create this script, it remains the sole property of it's author (http://homepage.ntlworld.com/bobosola/).


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 (http://homepage.ntlworld.com/bobosola/imagemap.htm)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:
<!-->
<script defer type="text/javascript" src="clientscript/vbulletin_pngfix.js?v=$vboptions[simpleversion]"></script>
<![endif]-->You're all set.! :)
[i]Note: Updated to reflect changes by the author, and 3.5.x javascript handling changes. This template modification works fine with 3.6.x as it is, and therefore won't be posted in the 3.6.x forum!

[Floris]

Very cool to share this, many will want this and especially nice to see the pros/cons against eachother. Good job.

[Adrian Schneider]

Thanks, works great.

[Bad Bunny]

Thanks, works great.

It doesn't seem to do anything for me. I am using rc1

[Adrian Schneider]

I think you have to do a hard refresh for the new JS files to load.
Ctrl F5

[Oblivion Knight]

Failing that; What version of Internet Explorer are you using and do you have javascript enabled?

[Bad Bunny]

Yeah, I restarted IE. I appreciate the work you did, and it must be good stuff. But I ended up using a different method. But thank you!

[Wayne Luke]

Great to see a solution which doesn't require modifying the PHP or how images are called. I used it to upload all new PNG emoticons to my site and it works great. Going to replace the icons with PNG tomorrow.

Hopefully since IE7 should support this transparently, more webmasters will start using PNGs to their full potential and we can see some cool things because of it.

[Rhoads]

Nice, installed in 5 sec and working perfectly :nervous:

[TheFocusElf]

sure, this mod is no catch all -- but I do like that it does address the issue.

-installed-

[Darat]

Hi - wondering if this could be made to work with a "runtime generated" png? We've just installed LaTex onto our forum and we output that as a transparent PNG, which looks fine on all browsers bar IE of course.

[bashy]

Absolutely brilliant...
I can now use the smiley maker ;)

Thanks m8 your a star :) installed

[Pcparts]

Thanks.


*installs*

[BaselineAce]

Anyone figure out a way to use background-image?

[crash resistant]

One of the most under-rated and under-used hacks/mods in existance.

THANK YOU

Shame on you developers for not using PNG, regardless of IE support. Remember the whole firefox shebang?

[wizardan]

Perfect.
It addressed a concern I had for one of my skins.
Very much installed!

[reismarktq2]

This hack works perfectly for me except for one major problem: Avatars.

I thought the problem was that height and width weren't specified, but I spent two hours trying to figure out how to add that and it still wouldn't work. Anyone?

[Lost_Prophet]

Fantastic :D
*install*

[magicktrick]

wow, I was looking for something like this for my main site, and Viola! It works there too. Many thanks...installed and then some.

[Oblivion Knight]

This hack works perfectly for me except for one major problem: Avatars.

I thought the problem was that height and width weren't specified, but I spent two hours trying to figure out how to add that and it still wouldn't work. Anyone?Avatars should work if you use the file system storage option instead of database.. :)

[sensimilla]

I did everything as described and it doesnt work for me with the BBcode manager and rounded quotes hack.
https://vborg.vbsupport.ru/showthread.php?t=120073

Is it possible ? IE 6 here..

[bada_bing]

Stupid question but what does this actually do?

[sensimilla]

Stupid question but what does this actually do?

Theres no stupid questions only stupid answers.

Removes blue backgorund on transparet gifs in IE, I belive its IE that should be fixed.

[Adrian Schneider]

Theres no stupid questions only stupid answers.

Removes blue backgorund on transparet gifs in IE, I belive its IE that should be fixed.
I thought you were going to say "... only stupid people". lol

There is a "bug?" in IE that prevents PNG transparency. This is a workaround so the images look okay. I've been using it for about a year now...

[Sin City]

excellent hack... very useful

[Scormen]

I did everything as described and it doesnt work for me with the BBcode manager and rounded quotes hack.
https://vborg.vbsupport.ru/showthread.php?t=120073

Is it possible ? IE 6 here..
Hi,

I use that hack to, but it also does not wants to work for me.. :(
I'm using 3.6.2

Grtzz

[Oblivion Knight]

That modification contains a lot of this type of image reference in the coding:
<td style="background-image:url();">As mentioned in the introduction; CSS backround PNGs are not supported.

[Scormen]

Ohh okay sorry, I didn't cheked the CSS... My fault!

Thanks,
Kris

[nokturno]

excellent hack

[Ohiosweetheart]

Where, exactly, in headinclude to we place this code ??

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="clientscript/vbulletin_pngfix.js?v=$vboptions[simpleversion]"></script>
<![endif]-->

[Ultima07]

haha this is just what i needed http://www.tamilultima.com

[Defkalion]

Great hack, works like a charm in 3.6.8 :)

Many thanks to the author and the thread starter :)

[argus]

Works great in 3.6.8 PL2. Thank you for sharing.

[GoodKarmaKid]

Does this work with vb 3.7 RC1 ??

[Selene]

I merged the xml into my style
uploaded the pics to the right path in images editor

and the icons are not showing up? So what is it I have done wrong? : )

[Wayne Luke]

Does this work with vb 3.7 RC1 ??

It should work in all versions of 3.7.0.

[Wayne Luke]

I merged the xml into my style
uploaded the pics to the right path in images editor

and the icons are not showing up? So what is it I have done wrong? : )
Can't really tell.. Do you have a screenshot of the problem?

[Super Jinni]

ok, I tried it just now, but it didn't work for me

even after doing hard refresh

[Masiello]

Thanks, in combination with the Wayne editor it works perfect on my 3.7.3 PL1 board :)

[bleros]

good job mann

[rolandogomez]

Works great in VB 3.8 RC, http://www.phototherapy.org (http://www.phototherapy.org). Thanks!

[y2krazy]

Installed. Working like a charm!

vB Version: 3.8.1
IE Version: 6.0.2900.2180

Thank you VERY much!!

~ Sean

[Phobos49]

Thanks!!!! Perfect!!!

vB Version: 3.8.2
IE Version: 6.0.2900.5512

[Pandadisossato]

I can confirm that it work properly with:

vb Version: 3.8.4

Thanks