Cart Search
New Topic
Forum Home | Login
werewolf
werewolf
Join Date 04/2001
+28

How to do transparency on a web page

July 8, 2002 1:56:44 PM from WinCustomize ForumsWinCustomize Forums
I made a .png with alpha channel transparency, but it's not transparent on the web page. Is it possible? Could someone help please? Thank you.

Powered by SkinBrowser!
Locked Post
Search this post
Advanced Search
Subscription Options
Reason for Karma (Optional)
Successfully updated karma reason!
2 Pages1 2 
werewolf
paxx
Join Date 03/2001
0
Reply #1 July 8, 2002 2:31:37 PM
from WinCustomize ForumsWinCustomize Forums
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).
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
werewolf
Join Date 04/2001
+28
Reply #2 July 8, 2002 4:24:20 PM
from WinCustomize ForumsWinCustomize Forums
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

Powered by SkinBrowser!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
werewolf
Join Date 04/2001
+28
Reply #3 July 8, 2002 4:31:38 PM
from WinCustomize ForumsWinCustomize Forums
Ahhh, it's not even gray, it's C7CFCF to be exact. The web page won't do that color. Poop!

Powered by SkinBrowser!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #4 July 8, 2002 4:32:18 PM
from WinCustomize ForumsWinCustomize Forums
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.
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
werewolf
Join Date 04/2001
+28
Reply #5 July 8, 2002 4:37:49 PM
from WinCustomize ForumsWinCustomize Forums
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.

Powered by SkinBrowser!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #6 July 8, 2002 4:50:47 PM
from WinCustomize ForumsWinCustomize Forums
I made a quick example to illustrate it:
http://pax.gslcom.com/pngtest/

Drag the face of my messy son around.
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #7 July 8, 2002 4:51:42 PM
from WinCustomize ForumsWinCustomize Forums
K, no problem.
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
Carlitus
Join Date 07/2001
0
Reply #8 July 8, 2002 4:55:57 PM
from WinCustomize ForumsWinCustomize Forums
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!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
werewolf
Join Date 04/2001
+28
Reply #9 July 8, 2002 5:13:35 PM
from WinCustomize ForumsWinCustomize Forums
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.

Powered by SkinBrowser!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
werewolf
Join Date 04/2001
+28
Reply #10 July 8, 2002 5:16:34 PM
from WinCustomize ForumsWinCustomize Forums
Hmmm, any free alternative for doing simple Flash type things?

Powered by SkinBrowser!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
joetheblow
Join Date 12/2001
0
Reply #11 July 8, 2002 8:51:04 PM
from WinCustomize ForumsWinCustomize Forums
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?
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
Transmutate
Join Date 03/2001
0
Reply #12 July 8, 2002 8:59:16 PM
from WinCustomize ForumsWinCustomize Forums
Here's a crazy idea: why not use a transparent (where it needs to be) .gif file instead of the .png file?
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #13 July 8, 2002 9:03:27 PM
from WinCustomize ForumsWinCustomize Forums
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.
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
fearoffours
Join Date 03/2001
0
Reply #14 July 9, 2002 4:09:51 AM
from WinCustomize ForumsWinCustomize Forums
hmmm I've seen a shareware flash thing on the cover of some UK computing mags...

fearoffours toddles off to google
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
fearoffours
Join Date 03/2001
0
Reply #15 July 9, 2002 4:12:18 AM
from WinCustomize ForumsWinCustomize Forums
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/
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #16 July 9, 2002 6:52:34 AM
from WinCustomize ForumsWinCustomize Forums
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/
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
craeonics
Join Date 03/2001
0
Reply #17 July 9, 2002 8:12:07 AM
from WinCustomize ForumsWinCustomize Forums
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.
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #18 July 9, 2002 9:17:58 AM
from WinCustomize ForumsWinCustomize Forums
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...
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #19 July 9, 2002 9:36:01 AM
from WinCustomize ForumsWinCustomize Forums
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?
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #20 July 9, 2002 10:09:50 AM
from WinCustomize ForumsWinCustomize Forums
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!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
werewolf
Join Date 04/2001
+28
Reply #21 July 9, 2002 10:35:22 AM
from WinCustomize ForumsWinCustomize Forums
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.

Powered by SkinBrowser!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
Doreen
Join Date 03/2001
+26
Reply #22 July 9, 2002 11:34:39 AM
from WinCustomize ForumsWinCustomize Forums
neat paxxy!
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #23 July 9, 2002 11:59:54 AM
from WinCustomize ForumsWinCustomize Forums
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')"
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
Doreen
Join Date 03/2001
+26
Reply #24 July 9, 2002 12:05:33 PM
from WinCustomize ForumsWinCustomize Forums
oh yeah of course! that all makes perfect sense! hehe
Reason for Karma (Optional)
Successfully updated karma reason!
werewolf
paxx
Join Date 03/2001
0
Reply #25 July 9, 2002 12:11:06 PM
from WinCustomize ForumsWinCustomize Forums
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?
Reason for Karma (Optional)
Successfully updated karma reason!
2 Pages1 2 
Stardock Forums v        Server Load Time:   Page Render Time: