Oblivion Knight
06-24-2005, 10:00 PM
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:
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="clientscript/vbulletin_pngfix.js"></script>
<![endif]-->You're all set.! :)
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:
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="clientscript/vbulletin_pngfix.js"></script>
<![endif]-->You're all set.! :)