Pngfix not working with flash object in IE6

176 Views Asked by At

I have a website - http://gap.quotamarketing.co.uk/ - and on this website I have a pngfix. I also have a flash object.

In IE6, which I am required to support, every image after the flash object is not included in the document.images that the png fix uses to loop through the images, and so the png fix doesn't get applied. Any ideas how I can get the rest of the images to appear in this list? (I am looking to replace the brightside group logo and it really shows with the new image)

Any help greatly appreciated!

pngfix script:

// JavaScript Document
/*

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

There are 1 best solutions below

1
shanethehat On BEST ANSWER

I'm not familiar with pngfix, but you should consider using SWFObject to embed your Flash object. You could then delay the Flash object's insertion into the page until after your pngfix has completed. Because your pngfix script uses defer to put off it's execution until the page is loaded, you will have to take a similar measure to delay the initialization of SWFObject.

The way I would do this is to set a variable in the conditional comment block that we can check outside. If it doesn't exist, then you can just get on and embed the SWF using SWFObject, otherwise, you would call the embed from the end of the pngfix script.

<!--[if lt IE 7]>
<link href="includes/ie6print.css" rel="stylesheet" type="text/css" media="print" />
<link href="includes/ie6template.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">var horribleOldBrowser = true;</script>

<script defer type="text/javascript" src="includes/pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    if(typeof horribleOldBrowser === 'undefined') {
        //must not be using pngfix, let's embed with swfobject now
        swfobject.embedSWF("Flash/formFlash2.swf", "myTargetContainer", "300", "210", "9.0.0");
</script>

Then, at the end of the pngfix script, you put the same line of Javascript in again to embed swfobject when everything is finished.

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
      }
   }
   swfobject.embedSWF("Flash/formFlash2.swf", "myTargetContainer", "300", "210", "9.0.0"); 
}