PNG transparency in Internet Explorer?

Whatever...

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
User avatar
Víctor Paredes
Site Admin
Posts: 5646
Joined: Wed Jan 26, 2005 12:18 am
Location: Barcelona/Chile
Contact:

PNG transparency in Internet Explorer?

Post by Víctor Paredes »

is there some way to put on my page png files with alpha channel and that IE support it?

i hate IE and love firefox... but i must to think in all users, even who doesn't use firefox (...)

thanks.
User avatar
bupaje
Posts: 1175
Joined: Fri Nov 12, 2004 5:44 pm
Location: California
Contact:

Post by bupaje »

Try this page http://www.alistapart.com/articles/pngopacity/

I am not sure if IE7 has fixed the issue or not - hope so.
[url=http://burtabreu.animationblogspot.com:2gityfdw]My AnimationBlogSpot[/url:2gityfdw]
User avatar
7feet
Posts: 840
Joined: Wed Aug 04, 2004 5:45 am
Location: L.I., New Yawk.
Contact:

Post by 7feet »

There are 2 main ways of making them work. IE takes a bit of hacking to make them work properly.

First set of techniques use JavaScript to do a bunch of stuff on the client side to add the changes needed to all PNG image tags in the document before it gets to the server. I found this one at http://homepage.ntlworld.com/bobosola. I'm using it on my site. I was using a lot of PNGs on my site and never once looked at it in IE - and when I did it was horrible. This works well, as long as the user doesn't have JavaScript disabled.

1- create a file named "pngfix.js". This will be an "include" file that will be inserted into any page with PNGs.

Code: Select all

/*
 
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
      }
   }
}
2- On each page where you have PNGs, insert this code somewhere in the "<head> </head>" section of the page -

Code: Select all

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
I have all of my HTML files in one directory, if they are in more than one you would want to make the 'src="pngfix.js"' above into an absolute path, or have a copy of "pngfix.js" in each directory.

The second is use a cookie that stores the users browser type, and then use a PHP script to generate the proper code modifications for IE. I don't much like cookies, so I don't find this satisfactory either. You can find details on this a number of places, I found several in 2 minutes searching.

The 3rd possibility is my own, and I'm still working on it. I wrote a PHP script for online comics, that would ask the browser what it was and what the screen resolution was. It's just a script, so it doesn't really create anything visible. Then it would create another browser appropriate PHP page and pass it the image I wanted to show and the screen resolution of the user so it could be resized to fit the screen, then re-direct to that. Works well and the redirect is pretty transparent, and it's all server-side so it doesn't matter what the user has disabled. I tried making a modification of this that would make the proper PNG changes for IE, but it's a little more complicated and I don't know PHP well. And I haven't spent much time on it. But if I get it to work, I'll certainly send it your way.

bupaje - I'm not sure as I haven't played with it in any way, but I've heard that IE7 is better but certainly not fixed as far as PNGs go, but who knows where it'll end up...
User avatar
bupaje
Posts: 1175
Joined: Fri Nov 12, 2004 5:44 pm
Location: California
Contact:

Post by bupaje »

I have IE7 but wasn't aware of any png heavy page, without a fix implemented, that I could test it on. There are still some 'gotchas' though as there has been a page here and there and some plugins - like QT- that give me 'unable to show this page' type errors. The review I read did suggest that in spite of these early glitches the security was so much better it was worth getting which is why I have it at work.
[url=http://burtabreu.animationblogspot.com:2gityfdw]My AnimationBlogSpot[/url:2gityfdw]
User avatar
Víctor Paredes
Site Admin
Posts: 5646
Joined: Wed Jan 26, 2005 12:18 am
Location: Barcelona/Chile
Contact:

Post by Víctor Paredes »

thanks!
i thought maybe there wasn't solution.

we (the people of Taza Triste) are creating a weird site in which all can be moved (images, text, videos, mp3...), and in which all people can make his own page and design it as he/she wants using CSS.

it's a very ambitious project and we still in the ultra beta version (you can see in http://www.tazatriste.cl). unfortunately for you this page is in spanish, but i suposse that who understand a little CSS style will play with this page even if doesn't speak in spanish.

so, what i want to create using png are pictures with layers, and you will be able to move each one of this layers.

i will try with this code. thanks!, i won't worry anymore about ugly transparency.
Post Reply