Helpful Information
 
 
Category: Graphics and Multimedia discussions
png alphablending/transparency in IE?

My gut, as well as all of the common sense i've collected over my internet life, is telling me that using a partly transparent, partly translucent PNG image online is not a possibility BUT you people are smart, so i figured i would ask, cuz it would just make life that much easier.

:o <-- gayest smiley ever.

_shecky

Originally posted by Shecky
:o <-- gayest smiley ever.lmao :D this little fella isn't much better: http://www.simonsgroup.com/siteimages/s/smileyexhibit.gif

IE doesn't display png transparencies correctly, when I say correctly, I of course mean it doesn't work at all. Mozilla on the other hand does so perfectly, but then the general populous don't use Mozilla.

theres a work-around and i know it!!!! I'll find it some day... if i have to use php to find the alpha and color of every single pixel, i'll do it!!!!!

Actually, prompted by this thread and cable modem, well where it always is; I downloaded Mozilla for testing and PNG's really do look great; I created two alpha gradients running into each other, one red, one blue, put them over a gridlike background. Why Microsoft haven't got PNG's working properly I don't know, they really are a useful format for web design.

i'm not sure exactly why IE is dragging their feet on png either... then again i'm not sure... why netscape still tries anymore, or why flamible and inflamible mean the same thing.

I want to see a program which would take your png image, account for how many levels of translusency are in the image, then split them into gifs, layer them on top of each other with DIVs, and apply the respective level of IE alpha filter on them!

Perhaps its unresonable to want up to 100 layers and 100 images stacked on top of each other to create a soft edge to and image overlay, but thats what i want!!!

if you read this entire rant... think of how much of your life you just wasted.

_shecky

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

its stupid how much i love you! THANK YOU from the bottom of my heart!!!!! :thumbsup: :thumbsup:

this is why i ask you smart people these things!!!!

That is really quite stupid still because IE 5+ for the Mac displays PNG images perfect. So does NS7/Moz for the Mac and PC.

There is a petition to Microsoft at this URL
http://www.petitiononline.com/msiepng/petition-sign.html?

Maybe it will do some good signing it. I did.

CP

Originally posted by dreamingdigital
That is really quite stupid still because IE 5+ for the Mac displays PNG images perfect. So does NS7/Moz for the Mac and PC.

There is a petition to Microsoft at this URL
http://www.petitiononline.com/msiepng/petition-sign.html?

Maybe it will do some good signing it. I did.

CP

well IE apparently does support png images with an alpha channel, as borgtex pointed out. His link points to a browser-sniffing version of the new AlphaImageLoader filter (ie 5.5+)

http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

an simple example of how this is used would be



<img src="spacer.gif" border="0" style="width:50; height:50; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='any.png', sizingMethod='scale')" />


Width and height must be declared, and spacer.gif is the typical 1x1 transparent pixel gif
The png also has to be interlaced. Paintshop pro has a great png optimizer under "export."

Okay I am trying out the 'fix' that Borgtex posted, it works fine on my machine but once I post it to a webserver it all goes downhill from there, http://www.kpdk.com/png/, when I look at it there I get no Alpha transparency, any ideas?

Originally posted by DanHibiki
Okay I am trying out the 'fix' that Borgtex posted, it works fine on my machine but once I post it to a webserver it all goes downhill from there, http://www.kpdk.com/png/, when I look at it there I get no Alpha transparency, any ideas?

did you upload the web-component file and yer blank.gif? Dont beat me for asking.

try posting it like i had, in the previous post, with the alphaimageloader fitler. granted it doesnt take into account the foolish masses who wont upgrade their browsers, but it will give you some better clue as to whats going on.

It's also possible that your server has extremely bad support for anything cool :-P

Originally posted by Shecky
did you upload the web-component file and yer blank.gif? Dont beat me for asking.
Check

try posting it like i had, in the previous post, with the alphaimageloader fitler. granted it doesnt take into account the foolish masses who wont upgrade their browsers, but it will give you some better clue as to whats going on.
Check, when done that way it works, but when done like the example from webfx it pisses me off :) What has to be done server wise for the HTC files???

It's also possible that your server has extremely bad support for anything cool :-P
More than likely, Check

i really dont know, but i'm gunna attempt to apease you anyway but offering this.

It's going to be just as easy for you to find or write your own browser-sniffer code for ie5.5+

The way this component works is that, if your browser supports it, alphablending happens, if not, you get the background matte... (i assume you already know this) so, really, if you're this adamant on using a png, you may as well write something that effectively does this.

a. check for ie5.5+ & win32
b. if yes, picID.filter = "alphaimageloader etc etc... (yourpng.png)"
c. if not, picID.src = "alternate_image.jpg"

<img id="picID" src="blank.gif">

possibly, i'm oversimplifying things...

another method is just taking all of the script in the htc file and pasting it in the head of your page... that might work.
Just remove everything before and after the script tags, and put onpropertychange="propertyChanged()" in the image tag you want to use it in.

I went ahead and called the 'server people' to check to see if HTC was in the mime types table, it wasn't, so I forced them to add it, problem solved YAY!










privacy (GDPR)