png transparency in J1.5

[madsamurai]

I'm upgrading a site from J1.0.12 to J1.5. The template uses a bunch of PNGs with transparency, and with the old J1.0.12 site, I was using the Ultimate PNG Fix mambot from JoomlaWorks.  This no longer works with 1.5 (in legacy mode).

Any suggestions?

[ford]

Add this to your template somewhere inside the section:

Code: Select all

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   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
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Source : http://homepage.ntlworld.com/bobosola/index.htm

Bob Osola, the author, offers several tips on implementation. Above is only one of the ways to do it.

Ford

[madsamurai]

Thanks, ford.

Actually my problem is with css background images with transparency. Foreground images are good using the scripts out of the ultimatePNG fix plugin for J1.0, but the background png fix script doesn't work with J1.5. Unfortunately the developers aren't interested in fixing it until J1.5 is a final release, so I'm on my own here...

[jedi_vader]

So is there a solution of this problem with the background CSS .png images?

Earlier today, I found the solution that ford suggested, and it works fine for the foreground images, yet the CSS background .png-s are still displayed wrong by the IE6. Then I found this topic here.

madsamurai, did you manage to solve that problem? I can see you have posted this in November 2007, so any luck since then?

[madsamurai]

I have found a js fix called SuperSleight (http://24ways.org/2007/supersleight-tra ... png-in-ie6) that looks like it will do the trick, but I haven't had time to try it yet... looks like it should be simple enough to just include in the head of a template. It says it does both foreground and background/css images, like ultimatePNGfix did.

[jedi_vader]

Thanks for the quick answer!

I got to that page too, yet I already had found this:
http://www.twinhelix.com/css/iepngfix/

It definitely works, yet you loose some control of the positioning of the css background images, but its a bearable loss. Maybe I'll try the one you posted too, but if you try it and it does not work, be shure that the one in the link above works.

Thanks again, cheers!