transparency issues...

Poster: ybouc
Dated: Thursday January 29 2004 - 5:22:26 GMT

I hope something similar hasn't been answered before !

Ok, I'm using images to build my menu, and i need some transparency. Now, I've saved images of my sub-menus in PNG-24 format, so that i can have transparency AND keep a nice drop shadow effect. However, is it possible that the menu is having some trouble with this ?

Please take a look at the screenshot ( http://www.nexus-is.ca/~yannick/menu_shot.gif ), and the code ( http://www.nexus-is.ca/~yannick/menu_data_acmdp.js ) and you will see what i mean (don't mind the alignment of the sub-menu for now). As you'll see, the gray area surrounding the buttons should actually be transparent.

I've looked through various threads here, and i saw that i could try "onbgcolor=transparent" and "offbgcolor=transparent" in my style variables, but that doesn't seem to work (however, the "borderstyle=transparent" one DOES work, and that's why there's no more black border around that gray area).

So, basically, what could be the problem here, and what could be the solution ? It would be great to know, as i'll be ending up in a similar situation for another site...

thanks in advance !

Poster: Maz
Dated: Thursday January 29 2004 - 6:06:10 GMT

Have you tried taking off opacity, fade or anything else like that?

Could it be a transparency issue on an image, it looks like you have images there?

Regards,
maz

Poster: ybouc
Dated: Thursday January 29 2004 - 18:39:28 GMT

yes, i did take off all filters, fades, and such.

as for the images, the transparency does seem to work, because when i display the image elsewhere, the background shows just fine...

i'm really wondering if it's not because the images are in PNG.. ?

Poster: Ruth
Dated: Thursday January 29 2004 - 21:11:11 GMT

Since you only gave a screen shot and we can't get your images for the .png section it's hard to try it out. But, I took the main menu images mission and misson over, converted it to .png and put it as the image/overimage in all the section of the submenu. It worked fine, no gray or anything. Of course the background didn't match the site since it's wasn't meant to be at that position. It worked in NN6, 7, IE5 and Opera 6, 7. Which browser are you seeing this on? and you should get the newest release..you're at rc17 it's now rc47. It would be easier to check if we had the images for the submenu.

Ruth

Poster: ybouc
Dated: Thursday January 29 2004 - 23:27:54 GMT

ok, i'll have the whole page online tomorrow... i'll post the link then. BTW, how do you know which RC i'm using just from the menu_data.js file ? the date ? if i download RC47, can i keep my current menu_data ?

thanks

Poster: Ruth
Dated: Friday January 30 2004 - 1:04:04 GMT

If you open the milonic_src.js file you will see- Milonic DHTML Menu - A JavaScript Website Navigation System.
Version 5.0 Release Candidate 17.0 Built: Sunday October 19 2003 - 13:39- and so on, same thing in the mmenudom.js and mmenuns.js files, these three need to match making sure you use the same rc, and yes you can keep your menu data file. Which browser are you using btw?

Ruth

Poster: ybouc
Dated: Friday January 30 2004 - 19:29:06 GMT

ok, you can start checking it out at http://nexus-is.ca/~yannick/acmdp/conse ... illers.htm . if you go over the "mission" button, you can see the sub-menu images that are causing trouble.

all help will be greatly appreciated !

Yannick

Poster: Ruth
Dated: Saturday January 31 2004 - 5:06:11 GMT

yes, I do believe it's the png, they are 24 bit and I dont' think you can make that transparent. You'd have to use gifs. Sorry.

Ruth

Poster: ybouc
Dated: Saturday January 31 2004 - 5:12:34 GMT

well, actually, the idea with PNG-24's is that you CAN make them transparent and have a much more precise transparency than with GIFs... but this could be incompatible with the menu ? It could be an interesting thing to implement, then....

Poster: Ruth
Dated: Saturday January 31 2004 - 5:21:02 GMT

Well, I have Corel and I tried to make them transparent but it wouldn't work, perhaps because my program is very old. I did have a thought that you might be able to make an image the size you want lookign like you want with the shadow and stuff, but with no text on it, then in each item you'd use it as a bgimage, then you could just type over it for the text you needed. Sorry, I'll have to check around about a program to make png transparent...hmmm, I have something here. Let me test it, if it works I post again.

Ruth

Poster: kevin3442
Dated: Saturday January 31 2004 - 8:42:43 GMT



Hi ybouc,

You and Ruth are both right in a way.

You're correct in your assertion that PNG-24's offer better transparency; in fact, unless I'm mistaken, PNG-24 is the only browser-compatible image format that supports alpha (or variable) transparency. It also supports indexed transparency, sort of like the GIF format, but it's the alpha channel that lets you get the nice variation in opacity that you're going for here, as opposed to the all-or-none of a GIF.

But Ruth is also on the right track... it's the PNG files, and more specifically, the alpha transparency in your PNG files, that's at the root of the problem. But they are not the cause of the problem... Internet Explorer for Windows is (and I'll assume from the way the menu appears in your screen cap that you are in fact using IE in Windows). You'll note, for example, that your submenus appear as you intend them to in NS7, and probably even in IE for the Mac (go figure). But as you can see, although IE for Windows will render PNG images, it won't render them very well; it cannot display the alpha transparency. There are variations on a javascript workaround available, like this one, but there are two caveats:

(1) This workarond only works in IE5.5+ (because it uses the AlphaImageLoader filter).

(2) Before you try it, let me mention that I have tried variations on this workaround with the menus myself, and could not get it to work (works great on images outside of the menus, but not on images in the menus). I suspect it has something to do with the fact that the menu uses <td> tags and the workaround has some difficulties in tables, but that's just a hunch. I haven't tried it for a while, so it still might be worth a quick try with the latest RC of the menus (RC47 I think).

That brings up another point that Ruth already raised... you're using RC17 on your test page. You should update to the latest one; you can keep your current menu_data.js file.

Sorry the news isn't better. Your menu design does look nice. I'm sure you'll figure out another approach.

Kevin

Poster: Maz
Dated: Saturday January 31 2004 - 9:54:58 GMT

Kevin,

Remember when we were making transparency for borders, it worked fine, I changed the sizes and then used gif transparency. Everything looked fine until I looked in IE, the transparency was ignored and the line ran through the middle of the text.

I gave up the idea for now.

maz

Poster: kevin3442
Dated: Sunday February 1 2004 - 5:30:28 GMT

Hmmm... that's funny. I was using IE when I tested and it worked fine. But you're using IE on a Mac, no?

Kevin

Poster: Maz
Dated: Sunday February 1 2004 - 18:59:13 GMT

Kevin, thats a yes.

maz

Poster: ybouc
Dated: Tuesday February 3 2004 - 23:00:11 GMT

me again, sorry i was kinda out of the loop for a few days !

ok, so let's say, if i keep the images without any shadow out of Photoshop, i could simply use the effect IN the menu's filter controls themselves, and if i'm not mistaken, i could achieve a similar effect, no ?

Poster: ybouc
Dated: Wednesday February 4 2004 - 23:38:50 GMT

I found this while looking around on the net :

http://www.koivi.com/ie-png-transparency/

an interesting PHP script that fixes things up in IE 5+ automatically... however, if you take a look at it, i don't think it could be used if the images are going to be used in the menu, but i could be wrong... anyone ?

Poster: Ruth
Dated: Thursday February 5 2004 - 3:44:05 GMT

I don't really know about the menu, someone else will have to help on that, but I use IE 5 and the only thing I see at the 'fixed display' is nothing and if i go to the site that has the logo I see..a black image the width of the browser and nothing else.

Poster: kevin3442
Dated: Monday February 9 2004 - 17:23:21 GMT


Hey,

The PHP approach you found uses the same AlphaImageLoader filter as the javascript fix I mentioned. The PHP approach is nice in that the fix is applied server side, so that you don't have to rely on javascript being available on the client side. However, since it uses the same basic trick, it'll have the same limitations... only works on IE5.5+ and probably won't work for the menu (might be worth an experiment to test it though).

Kevin

Poster: kevin3442
Dated: Monday February 9 2004 - 17:33:18 GMT


Actually, I don't think that'll work for you (you may have already discovered that for yourself). You want to apply a drop shadow on each menu item. But the menu system's built-in filters are applied to the entire menu, not to individual items. Also, the filters only work in IE5.5+, so your desired look wouldn't show up in other browsers.

Kevin

Poster: ybouc
Dated: Tuesday February 10 2004 - 3:31:35 GMT

got it... well, i guess i'll just go for a cruder shadow and save it in transparent GIF...