transparency issues...
transparency issues...
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 !
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 !
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
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
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
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
all help will be greatly appreciated !
Yannick
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
Ruth
Hi ybouc,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 ?...
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
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 ?
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,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 ?
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
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.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 ?
Kevin