How to do transparency on a web page
Monday, July 8, 2002 by werewolf | Discussion: WinCustomize Talk
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.
 |
|
Page 2 of 2 | |
|
|---|
paxx
Reply #23 Tuesday, July 9, 2002 11:59 AM
Reply #23 Tuesday, July 9, 2002 11:59 AM
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')"
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')"
Doreen
Reply #24 Tuesday, July 9, 2002 12:05 PM
Reply #24 Tuesday, July 9, 2002 12:05 PM
oh yeah of course! that all makes perfect sense! hehe
paxx
Reply #25 Tuesday, July 9, 2002 12:11 PM
Reply #25 Tuesday, July 9, 2002 12:11 PM
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?
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?
Doreen
Reply #27 Tuesday, July 9, 2002 12:35 PM
Reply #27 Tuesday, July 9, 2002 12:35 PM
I'm playing around paxxy I know anything can be simple when you pay attention...
that looked neat the way you could move that around like that!
that looked neat the way you could move that around like that!
Carlitus
Reply #28 Tuesday, July 9, 2002 12:38 PM
Reply #28 Tuesday, July 9, 2002 12:38 PM
werewolf, download trial versions of swish and flash. Swish are very good, and you can make the same as Flash (without the script language). In my opinion are more easy than macromedia flash, and ar not very expensive (if i can purchase a program, it costs little 
). I can't spend lots of money in Software!
Look also the Flashkit.com site , are the best info site (and resources) in Flash
). I can't spend lots of money in Software!Look also the Flashkit.com site , are the best info site (and resources) in Flash
werewolf
Reply #29 Tuesday, July 9, 2002 2:24 PM
Reply #29 Tuesday, July 9, 2002 2:24 PM
Thanks Paxx, I'll play around with this
Carlitus...Thanks to you too. I'll check those out.
Carlitus...Thanks to you too. I'll check those out.
craeonics
Reply #30 Tuesday, July 9, 2002 5:21 PM
Reply #30 Tuesday, July 9, 2002 5:21 PM
Paxx is making things sound hard again. The IE-trick is this bit:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zach.png')
...the rest is mere positioning and has nothing to do with alpha.
So to use it in an image do like this (theoretically, haven't tested it):
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zach.png')
...the rest is mere positioning and has nothing to do with alpha.
So to use it in an image do like this (theoretically, haven't tested it):
craeonics
Reply #31 Tuesday, July 9, 2002 5:23 PM
Reply #31 Tuesday, July 9, 2002 5:23 PM
I knew it would be stripped... *sigh*
<img width=123 height=456 src=url.png style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url.png')">
<img width=123 height=456 src=url.png style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url.png')">
paxx
Reply #32 Tuesday, July 9, 2002 9:31 PM
Reply #32 Tuesday, July 9, 2002 9:31 PM
No, I tried it, crae. It seems to not be working unless it's in a div tag. 
joetheblow
Reply #33 Tuesday, July 9, 2002 10:30 PM
Reply #33 Tuesday, July 9, 2002 10:30 PM
so IE supports PNG files now?? I thought they never do it. And about the transparantcy, I thought a gif image file could do it too? If you save the original file as a indexed file and then export it as a gif you can take out as many colors as you want.
And Paxx, it looks nice. I had a problem loading it up (computer seemed to stall) but then again I was using the JUNO browser.
Does this transparantcy work on Opera browser as well?
And Paxx, it looks nice. I had a problem loading it up (computer seemed to stall) but then again I was using the JUNO browser.
Does this transparantcy work on Opera browser as well?
paxx
Reply #34 Tuesday, July 9, 2002 11:03 PM
Reply #34 Tuesday, July 9, 2002 11:03 PM
joetheblow: a GIF has 256 colors, one of which can be used for transparency.
But there two kinds of PNGs: the 256 colors PNGs are like a GIF, maybe a bit better IMO. And there is the 24 bits PNG with an 8 bits alpha channel. It means that, unlike a GIF, the 8 bit alpha channel give you a range of 256 levels of transparency, from a little transparent to completely transparent. Understand?
As for Opera, this is what libpng.org says:
Opera [Opera Software] (Win32, OS/2, BeOS, Mac PPC, Mac OS X, Linux/X, Solaris/X, Symbian OS) - version 3.51 and later; full alpha support in version 6.0 and later (screenshots); broken binary transparency in older versions (apparently only for palette-based images, where the alpha value of the first palette entry is misinterpreted as the index of the palette entry to be made fully transparent, a la GIF); progressive display (except transparent PNGs on Windows versions); full gamma support (assumes a file gamma of 1/2.0 for unlabelled PNGs, vs. 1/2.2 for GIFs and JPEGs); bogus ``out of place IHDR'' errors and segfaults in Linux version 4.x or 5.x; read-only; adware/commercial. (Version 3.50 supported PNG only via old-style plug-ins, such as PNG Live 1.0, that supported neither transparency nor progressive display; see Netscape Navigator above. Version 3 and possibly 4 also supported Windows 3.x, but that support was dropped from more recent versions.)
For information on all the browser supports of PNG, go at http://www.libpng.org/pub/png/pngapbr.html
Of course they say IE doesn't support transparent PNG, I bet they don't know the secret trick.
But there two kinds of PNGs: the 256 colors PNGs are like a GIF, maybe a bit better IMO. And there is the 24 bits PNG with an 8 bits alpha channel. It means that, unlike a GIF, the 8 bit alpha channel give you a range of 256 levels of transparency, from a little transparent to completely transparent. Understand?
As for Opera, this is what libpng.org says:
Opera [Opera Software] (Win32, OS/2, BeOS, Mac PPC, Mac OS X, Linux/X, Solaris/X, Symbian OS) - version 3.51 and later; full alpha support in version 6.0 and later (screenshots); broken binary transparency in older versions (apparently only for palette-based images, where the alpha value of the first palette entry is misinterpreted as the index of the palette entry to be made fully transparent, a la GIF); progressive display (except transparent PNGs on Windows versions); full gamma support (assumes a file gamma of 1/2.0 for unlabelled PNGs, vs. 1/2.2 for GIFs and JPEGs); bogus ``out of place IHDR'' errors and segfaults in Linux version 4.x or 5.x; read-only; adware/commercial. (Version 3.50 supported PNG only via old-style plug-ins, such as PNG Live 1.0, that supported neither transparency nor progressive display; see Netscape Navigator above. Version 3 and possibly 4 also supported Windows 3.x, but that support was dropped from more recent versions.)
For information on all the browser supports of PNG, go at http://www.libpng.org/pub/png/pngapbr.html
Of course they say IE doesn't support transparent PNG, I bet they don't know the secret trick.
joetheblow
Reply #35 Wednesday, July 10, 2002 1:22 AM
Reply #35 Wednesday, July 10, 2002 1:22 AM
I see..... thanks!!!
I am so glad I found this site!!!
I am so glad I found this site!!!
Koasati
Reply #36 Wednesday, July 10, 2002 10:41 AM
Reply #36 Wednesday, July 10, 2002 10:41 AM
Paxx.........your link locks up my browser, and deletes most of my cookies! Very strange......... 
paxx
Reply #37 Wednesday, July 10, 2002 12:20 PM
Reply #37 Wednesday, July 10, 2002 12:20 PM
Wow, which link, the one 2 posts above yours, or the link to tha transparent PNG?
What's your browser anyway? It's meant to demonstrate how IE can display transparent PNGs, if you don't have IE, it's a little pointless.
If you have Opera 6 I believe there is no special code to write, it displays PNGF alpha channel fine without having to write any Microsoft-specific code.
Gosh I hate Microsoft sometimes (ok, often). It's nice to know that PNGs can display transparency but why should I have to write code that isn't understood by other browsers? Evil!
What's your browser anyway? It's meant to demonstrate how IE can display transparent PNGs, if you don't have IE, it's a little pointless.
If you have Opera 6 I believe there is no special code to write, it displays PNGF alpha channel fine without having to write any Microsoft-specific code.
Gosh I hate Microsoft sometimes (ok, often). It's nice to know that PNGs can display transparency but why should I have to write code that isn't understood by other browsers? Evil!
Koasati
Reply #38 Wednesday, July 10, 2002 12:53 PM
Reply #38 Wednesday, July 10, 2002 12:53 PM
The link to the pngtest...........I'm using Crazy Browser, which is IE6 with extra features. After attempting to visit the link, things went nuts...........links in favorites didn't work, and other weirdness. I'm afraid to try it again... 
DavidK
Reply #39 Wednesday, July 10, 2002 1:15 PM
Reply #39 Wednesday, July 10, 2002 1:15 PM
that link works ok for me. It doesn't seem to have any weird scripts on that page either, It might be something else that got on your system Koasati...
Another alternative to Flash is in the version 10 release of CorelDraw. It's called Rave. I didn't install it so I don't know how well it works but if you have Corel 10 it's in there...
Another alternative to Flash is in the version 10 release of CorelDraw. It's called Rave. I didn't install it so I don't know how well it works but if you have Corel 10 it's in there...
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
|
|
Page 2 of 2 | |
|
|---|
Reply #21 Tuesday, July 9, 2002 10:35 AM
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.