Jump to content

Alpha opacity for PNG support


elementalgrace
 Share

Recommended Posts

Hi,I haven't done much javascript but need to make the png files appear correctly in IE5.5 with the alpha transparency and have found a workaround on the web that is supposed to work for IE5.5 and IE6. It seems to work in 6 but not IE5.5. I am using a .js include file and referencing it from the header:Reference in HTML

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

java script:

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

If anyone can point out where I'm going wrong, I'd be ever so gratefulCheers

Link to comment
Share on other sites

Well, for one thing, your conditional comment is wrong. You really need to use

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

I don't know where the "defer" came from, and I'm absolutely positive you need to use "lt", not "<". "lt" as this "lt" is not the "& lt;" named entity.

Link to comment
Share on other sites

Weird, today it's switched and my standalone version of IE6 isn't supporting the opacity but the standalone version of IE5.5 is doing it right. Could it possibly have anything to do with the fact that I am using standalone versions of these browsers?I did change the conditional comment as you suggested, but then it wasn't supported in my versions of either IE6 OR IE5.5 ???

Link to comment
Share on other sites

I've always used this, it works fine for me.http://dean.edwards.name/IE7/
Look, I'm probably being super-thick here but that just looked like gibberish to me. I changed the script tags in the HTML and downloaded the .js file and repointed the link to the .js file and it didn't work in either browser.I don't generally use javascript and it's not making enough sense for me to be able to troubleshoot the problem. All I want is a clear set of instructions that works in IE 5.5 and 6. Would it help if I posted all my code?
Link to comment
Share on other sites

You need to read the documentation online, here's the installation page for IE7 that shows the script tag to add to your page:http://dean.edwards.name/IE7/install.htmlThat goes in the <head> of the HTML document. There's also this note on the usage page:

By default the PNG solution operates on files ending -trans.png. You can override this by setting a global variable as described on the configuration page.
This is the configuration page:http://dean.edwards.name/IE7/usage/configure.htmlIt says there is a global variable for choosing which images to make transparent. By default the images need to end with "-trans.png", you can change that to just ".png" if you want it to work on all PNGs. The configuration page doesn't say, but I assume that the file where you change that is either ie7-graphics.js, ie7-core.js, or ie7-standard-p.js.Actually, it doesn't look like you change anything in any of those files. Instead you just define a global variable before you add the script to the page with whatever you want it to be.<script type="text/javascript">var IE7_PNG_SUFFIX = ".png";</script>That would go before the code that they show to add the IE7 script to the page.
Link to comment
Share on other sites

You need to read the documentation online, here's the installation page for IE7 that shows the script tag to add to your page:http://dean.edwards.name/IE7/install.htmlThat goes in the <head> of the HTML document. There's also this note on the usage page:This is the configuration page:http://dean.edwards.name/IE7/usage/configure.htmlIt says there is a global variable for choosing which images to make transparent. By default the images need to end with "-trans.png", you can change that to just ".png" if you want it to work on all PNGs. The configuration page doesn't say, but I assume that the file where you change that is either ie7-graphics.js, ie7-core.js, or ie7-standard-p.js.Actually, it doesn't look like you change anything in any of those files. Instead you just define a global variable before you add the script to the page with whatever you want it to be.<script type="text/javascript">var IE7_PNG_SUFFIX = ".png";</script>That would go before the code that they show to add the IE7 script to the page.
But I don't have a problem with IE7. IE7 works fine, as does firefox, safari and opera. It's IE6 I'm struggling with ...
Link to comment
Share on other sites

But I don't have a problem with IE7. IE7 works fine, as does firefox, safari and opera. It's IE6 I'm struggling with ...
No no. The name of the JavaScript library is IE7. It was created long before there was even an alpha of IE7 (the browser), so that's where the confusion comes from. So when justsomeguy said "IE7 script" he meant the actual files that you can download from that page, not the IE7 browser.
Link to comment
Share on other sites

No no. The name of the JavaScript library is IE7. It was created long before there was even an alpha of IE7 (the browser), so that's where the confusion comes from. So when justsomeguy said "IE7 script" he meant the actual files that you can download from that page, not the IE7 browser.
OK, I ended up using the solution for twinhelix. It still wasn't working right in IE5.5 and IE6. I ended up using Virtual PC and installing variations of IE5.5 and IE6 on different virtual machines. Both of the virtual machines display the code in IE5.5 and IE6, although the standalone versions are still not showing it right, so I can only assume that the standalone versions of IE6 and IE5.5 have a slight quirk in not using alpha transparency.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...