Web Design Forums

forbes · 28-01-2007, 14:49

ive been lookin around for an article on this forum that was posted awhile ago about a javascript code used to tackle the blasted transparent png problem in IE6..

can anyone point me in the right direction?
ta

transparent_opacity · 28-01-2007, 17:07

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
      }
   }
}

Use with conditional comments

transparent_opacity · 28-01-2007, 17:09

Oh, and for PNG backgrounds using CSS:

Code:

.element{
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/chapela.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.element[class]{
   background: url(images/chapela.png) no-repeat center center;
}

forbes · 29-01-2007, 05:28

Quote:

Originally Posted by transparent_opacity

Oh, and for PNG backgrounds using CSS:

Code:

.element{
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/chapela.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.element[class]{
   background: url(images/chapela.png) no-repeat center center;
}

Leg-end! cheers il have a crack at it soon...

hit-squad · 30-01-2007, 11:26

internet explorer is so gay

28-01-2007, 14:49	#1 (permalink)
forbes Senior Member Join Date: Aug 2006 Location: Belfast Posts: 741	transparent png's in IE6 fix help ive been lookin around for an article on this forum that was posted awhile ago about a javascript code used to tackle the blasted transparent png problem in IE6.. can anyone point me in the right direction? ta

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

30-01-2007, 11:26	#5 (permalink)
hit-squad digital artist Join Date: May 2006 Location: plymouth. uk Posts: 147	internet explorer is so gay

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)