How to do transparency on a web page

Yes, it's normal because only Mozilla and Netscape 6 supports 8 bits transparency in PNGs. IE 5 and 6 reads the alpha information but stupidly displays it on a grey background (stupid Microsoft).

Yep, that's exactly what it's doing. Oh well. I had a neat idea, I'll have to figure something else out. I am *not* a web designer

Ahhh, it's not even gray, it's C7CFCF to be exact. The web page won't do that color. Poop!

hehehe!
Another idea if you now Flash a little is to design your site in Flash.
Flash fully supports yhe 8 bit alpha channel in PNGs.

I just barely know what Flash is, don't have a clue how to use it. I figured out the backround color thing. I did some web page stuff a long time ago, but it seems I've forgotten it all. I'm using 1st Page 2000 to help me, but I'll have to re-read my HTML books to get re-acquainted with the basics.

I made a quick example to illustrate it:
http://pax.gslcom.com/pngtest/

Drag the face of my messy son around.

K, no problem.

wow paxx! good example! i have another example using transparent PNGs on a Flash file: http://www.carlitus.net the left menu uses pngs with alpha channel
Note: i used Swish 2 not Flash 5!

Paxx and Carlitus thanks for the examples. Those are cool. Carlitus, I like your left panel. Was that hard to set up? I'd like to give something like that a try. But, read my prior post, I'm pretty much back to square one with this.

Hmmm, any free alternative for doing simple Flash type things?

I was wondering if you could make a transparacy that allows a user to see the background (the desktop). I was trying a gif with transparancy and set it as the backround but I haven't tried it yet.

and what about frameless web pages? can you use a transparancy on that so it looks like a shape instead of a square?

Here's a crazy idea: why not use a transparent (where it needs to be) .gif file instead of the .png file?

Hehehe! Transmutate: you and your crazy ideas!

Of course, a GIF is the only way to do simple one color transparency, but PNG is the only solution for 256 color transparency.

hmmm I've seen a shareware flash thing on the cover of some UK computing mags...

/me toddles off to google

Here we are: 3D Flash Animator. I've not used it, but looks ok. I imagine it's not as fully featured as the real thing, but it's US$49.95 and there's a free demo download: http://www.3dfa.com/

werewolf, if all you want to do is type, you can use the "Flashtyper" on Flashkit's web site. You use it online, you don't download it. You can use from a plaetoria of fonts and effects. It's free.

For a cheap alternative, there is SWiSH that Carlitus mentioned. http://www.swishzone.com It's 50$ and the best cheap alternative to Flash that I know. There is also SWFX for 30$ http://www.wildform.com/swfx/

WIth the advent of http://www.openswf.org we might see a freeware Flash creation package one day.

Anyhow, did you know IE _is_ capable of displaying .png's correctly with alpha. Run a search for it, but it boils down to inserting some special code into the img tags.

Really Crae? Gonna have to look into it. It's very interesting...

As far as open SWF, the SWF format has been an open format for some time now (2 years I think), and it has indeed resulted into a number of SWF generator other than Macromedia's (including one from Adobe), but none free yet...

OK crae, a search on Google didn't yield any result. All I find is that IE does NOT support 256 colors alpha channel. It does indeed support 1 color transparency in 256 color PNGs (much like the GIF format), but that's it. Can you please tell me where I can the info you are about? Pretty please?

Never mind, I found it on MSDN's site! It WORKS!!!
Of course, it's the type of code that only works in IE, so you have to do 2 versions of the page for Netscape 6 and Mozilla.
Check it out: http://pax.gslcom.com/pngtest/png.htm
Made a version for IE and a version for N6/Moz. Earlier versions of Netscape won't display the transparency.

Again, drag my dirty boy around to see! Coooooooooooooool!

Good golly Paxx...I looked at the source for that web page. What is all that stuff? Did you just whip that out, or was that auto generated by something. Is all that really necessary just to have transparency and drag a layer around????

If you had to type all that I sure appreciate all the work you did just to try to help me. It was totally above and beyond what I was expecting.

neat paxxy!

werewolf, that's code from Dreamweaver, but it's not necessary for the transparency of the PNG. It's mostly all there just for the drag around bit, an the redirect to another page for Netscape users.

For transparency to work in IE, you need to call a special IE filter on the DIV tag, like this (of course you have to insert the code in a HTML tag):

div id="Layer2" style="position:relative; left:160px; top:84px; width:20px; height:20px; z-index:2; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zach.png')"

oh yeah of course! that all makes perfect sense! hehe

It's not as hard as it seems.
position: can be "absolute" or "relative". Write "absolute" to have the layer positioned from the browser edges.
left, top: just determins where the layer is positioned, in pixels, from the left and from the top.
width, height: the size of the layer
z-index: the stacking order. If you have another layer with the z-index:1, this one (with a z-index:2) would be stacked on top.
filter balblabla: that's the IE specific code to handle transparent PNGs, just change the path to your image after the SRC= bit.

Simple, no?