Transparent PNGs

theDragonsDen · **Transparent PNGs -** 11-10-2006, 03:29 PM

In IE 6 and lower, the only way to make your image transparent is to save it as gif. PNG is a larger filetype which preserves colors better than any other image type. PNG also has supports transparency and better than gif because it supports percentage transparency unlike gif.

However IE6 and lower dont support PNG transparency. In IE 7 this is fixed but a majority of people dont have it yet. Take a look below.
GIF -->

PNG -->

You cant really see it too good but if the gif were against a dark background it would be choppy If u highlight it u can see it better. The PNG bg should be transparent (if u have IE7) or have a grey bg if not.

This script makes it so ur image is transparent and doesnt have a choppy outside.

Javascript below

Code:

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

As it says in the note at the top of the script, put

Code:

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

between the <head> tags because IE7 is fixed for PNGs.

artoonie · **Re: Transparent PNGs -** 11-10-2006, 03:45 PM

Hey, that's really awesome, thanks! I'll try it out right now :]

theDragonsDen · **Re: Transparent PNGs -** 11-10-2006, 04:07 PM

No problem artoonie. I thought this was great when I found it too. I wish I had found out about this a long time ago after I spent alot of time making all the transparencies to find out it didnt work on the internet. Oh well.