Pngfix not working with flash object in IE6

Question

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

IE6 seriously? http://www.w3schools.com/browsers/browsers_explorer.asp — The_asMan, Jul 27 '11 at 16:59
@The_asMan - you realize that the stats on w3schools are only taken from their own site? _A site where people who are learning about web development go._ Unfortunately, outside of the dev community users are not so well educated, and some companies and government offices still insist on IE6. I primarily develop sites for computer games publishers, and it was only a year ago that we were able to drop support for IE6 completely, in what you might think to be a fairly up to date industry. — shanethehat, Jul 27 '11 at 22:52
@shanethehat regardless of the demographics why is this getting down voted? — The_asMan, Jul 28 '11 at 18:09
@user714783 You did not post any code how do you expect us to help? But from my experiences when the page breaks after a script the script that just ran is the issue. — The_asMan, Jul 28 '11 at 18:11
@The_asMan - Not by me, I've tried to even up the score, and edited the question to make it more readable. Seems to be a valid question to do with his pngfix script tripping over Flash objects as it traverses the DOM. — shanethehat, Jul 28 '11 at 18:11
Believe me I wish I could drop IE6 soooo much but I think we are waiting for it to go below 2% I use http://www.ie6countdown.com/ to check ie6stats dunno where they get there data from but its nice that they actually split it by country I am UK by the way. — user714783, Sep 21 '11 at 13:11

shanethehat · Accepted Answer · 2011-07-28T18:41:02.927

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"); 
}

Good solution. I don't know why anyone messes about with any other embed method. SWFobject just works. — Bosworth99, Jul 28 '11 at 18:23

Pngfix not working with flash object in IE6

1 Answers1