PNG transparency in IE and Drupal

Website creators often fight with older versions of Internet Explorer. This browser before version 7 doesn’t support transparent PNG images. Using PNG pictures with the transparency has certain foundation. GIF that the Internet Explorer 6 support without problems works with maximum of 256 colours and transparency in this format is impossible confront with alpha channel transparency in PNG images. Fortunately it is possible Internet Explorer 6 and 5.5 relatively easily make to respect the entire advantage of PNG format included its transparency.

There is several solution of this problem. The simplest and most effective way is done with only one JavaScript file/code included in a webpage body. The script search in a loop thorough all pictures in pages body. If PNG image is found then the script applies an AlphaImageLoader filter that in Internet Explorer 5.5 and 6 will ensure transparency of corresponding parts of PNG picture.

Regarding usage of mentioned filter functions works only in Internet Explorer 6 and 5.5. Older version of this browser doesn’t support the AlphaImageLoader filter, IE7 then support transparent PNGs without this workaround. Included JavaScript is necessary place among conditional commentary following, whether is used Internet Explorer prior to version 7. This condition in addition isn’t interpreted by other browsers and is completely valid, so you do not have to be afraid of this code use.

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Word defer in the script above is used to cause the images are replaced before they are rendered on a page. Appropriate pngfix.js file and its variants for image maps and rollover pictures can be found at homepage.ntlworld.com/bobosola in How To Use section. Take a look at the examples of transparent PNG images use and differences between PNG and GIF format.

Solving PNG transparency in Drupal

Couple of days before there have been introduced new module on Drupal.org which solves PNG transparency in Internet Explorer 5.5 and 6. This module use JavaScript file pngfix.js mentioned above. Just install this module, any settings isn’t necessary. There are only two functions in PNG Fix module. The first one is used for help displaying, the second adds the appropriate script to the headers of Drupal web pages. You can download the PNG Fix module from its project page on Drupal.org.