Members Zone

Username

Password

Remember me
Password Reminder
No account yet? Create one

Who's Online

We have 5 guests online
Banner
 
SiteGround web hosting SiteGround web hosting
 
PlugSocket
 
AboutUS
 
Valid XHTML 1.0 Transitional
 

How to fix the transparent png problem with Internet Explorer

In Internet Explorer 6 and below, transparent png files do not show correctly. The transparent part of the png is not transparent but a solid color. The following JavaScript will allow Internet Explorer to display the png file correctly.

The browser detect JavaScript is required for this script to work.

Copy this script and create a file in your JavaScript folder and name it transparent_png.js. 

JavaScript Snippet
  1. function correctPNG() {
  2.   if (BrowserDetect.browser == "Explorer") {
  3.     if (BrowserDetect.version <= 6.9) {
  4.       for(var i=0; i<document.images.length; i++) {
  5.         var img = document.images[i]
  6.         var imgName = img.src.toUpperCase()
  7.         if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
  8.           var imgID = (img.id) ? "id='" + img.id + "' " : ""
  9.           var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  10.           var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  11.           var imgStyle = "display:inline-block;" + img.style.cssText 
  12.           if (img.align == "left") imgStyle = "float:left;" + imgStyle
  13.           if (img.align == "right") imgStyle = "float:right;" + imgStyle
  14.           if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  15.           var strNewHTML = "<span " + imgID + imgClass + imgTitle
  16.             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  17.             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  18.             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
  19.           img.outerHTML = strNewHTML
  20.           i = i-1
  21.         }
  22.       }
  23.     }
  24.   }
  25. } 
  

To activate the JavaScript for your web page you must first reference both the browser_detect.js scipt and the transparent_png.js script from the HTML header, ensuring you use the appropriate path to the scripts. You must also include the onload event for the correctPNG function. 

HTML Snippet
  1. <head>
  2. <script type="text/javascript" src="/includes/js/browser_detect.js"></script>
  3. <script type="text/javascript" src="/includes/js/transparent_png.js"></script>
  4. <script type="text/javascript">window.attachEvent("onload", correctPNG);</script>
  5. </head> 
  
User Comments

Please login or register to add comments

Related Items

 

Banner
your god was nailed to a cross