transparency issues...

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

transparency issues...

Post by ybouc »

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 !
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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.. ?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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....
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

ybouc wrote: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 ?...
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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Kevin, thats a yes.

maz
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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 ?
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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 ?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

ybouc wrote: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 ?
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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

ybouc wrote: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 ?
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
ybouc
Advanced
Advanced
Posts: 26
Joined: Thu Oct 16, 2003 8:34 pm
Location: Montreal, QC Canada
Contact:

Post by ybouc »

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