Background opacity

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
jgold723
Super Advanced
Super Advanced
Posts: 40
Joined: Wed Nov 19, 2003 10:14 pm

Background opacity

Post by jgold723 »

I'd like to set the opacity of the background color in my menu. How do I do this?

Thanks,

John
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Background opacity

Post by Ruth »

Hi,

Opacity for IE is controlled using the overfilter in the menu_data.js file. For example:

Code: Select all

overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
The alpha opacity=90 would be I believe 90% opacity. If you want to apply opacity for other browsers you need to do it through a css class or you can do it in the menu_data.js file using the rawcss parameter in your menu styles of the menu_data.js file. For example, in the data file that came with the download see the styles section toward the top, i.e. with(menuStyle=new mm_style()){. In that style section add the following, usually people put it as the last line before the closing bracket:

Code: Select all

rawcss="opacity:0.5;-moz-opacity:0.5;";
}
These would apply to browsers other than IE, the ie opacity is achieved through the overfilter. In css the opacity and moz-opacity numbers are 0 to 1, that is, 0.1, 0.2, 0.3 and so on through 0.9 and finally, 1, they are equivalent to 0 opacity, 0.1=10%, 0.2=20% and so on. I'm not sure what it is you are trying to accomplish so I can't really give you any more information, or rather there is so much information I have no idea where to start. If you need to accomplish a particular thing and can tell me what it is, I can post back. Hope this helps.

Ruth
jgold723
Super Advanced
Super Advanced
Posts: 40
Joined: Wed Nov 19, 2003 10:14 pm

Re: Background opacity

Post by jgold723 »

Thanks Ruth. What I'm looking for is a semi-transparent white background behind my links, as the entire menu will sit on top of an image. So I need enough background to make the links readable, but transparent enough so that some of the image can bleed through.

John
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Background opacity

Post by Ruth »

Hi,

Well, I can probably figure out what you need, but I would actually need to have your menu_data.js file, the styles at the least so I know what colors you are using, and I would also need whatever the bg image is that will be on your page. The problem is, you can use a number of things, but you have to test them in IE versus Firefox and other browsers. For example, I can use a semi-transparent png background and it works pretty good for Firefox, but depending on the background image colors and menu colors, that png can mess up IE. So, if you can at least give me your bg image and the style colors you will be using I can see if I can figure something out.

Ruth
jgold723
Super Advanced
Super Advanced
Posts: 40
Joined: Wed Nov 19, 2003 10:14 pm

Re: Background opacity

Post by jgold723 »

Hi Ruth:

The link to the background image is below. The links are #273A96 with a white (partially opaque) background. I've pasted the menu data code below as well

The exact colors I can play with -- what I really need is the code to control the opacity of the background. I think the rawcss coding you mentioned will work, I'm just not sure how to tie that to the link background.

Thanks,

John
background:
http://www.coastofmaine.com/HopkinsWebArt.jpg

Menu:

Code: Select all

with(menuStyle=new mm_style()){

onbgcolor="#FFFFFF";
oncolor="#ffffff";
offbgcolor="#FFFFFF";
offcolor="#273A96";
bordercolor="#FFCC00";
borderstyle="";
borderwidth=0;
separatorcolor="#ffcc00";
separatorsize="2";
padding=8;
margin=0;
fontsize=".8em";
fontstyle="normal";
fontfamily="Arial";
fontweight="bold";
pagecolor="white";
pagebgcolor="#3399cc";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow-white.gif";
subimagepadding="2";


//overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow(color='#777777', Direction=135, Strength=5)";
//outfilter="randomdissolve(duration=0.3)";
}
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Background opacity

Post by Ruth »

Hi,

Well, I finally got it. You need to do a couple of things. First create a css class in your css file. If you don't use a css file, then you'll need to code that class in the head of every page where the menu is used. You can name the class what you want but this is what I set up

Code: Select all

.miltrans{filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;}
Add the following to the menuStyle

Next, in your menu data file add this to the menuStyle section:

Code: Select all

menubgcolor="transparent";
rawcss="filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;";
overfilter="Fade(duration=0.2);Alpha(opacity=70);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
offclass="miltrans";
onclass="miltrans";
That should do it. I tested it in Netscape 7.2, 9; Firefox 3.0.19, 3.6.8, 18.01, Opera 9, 10, 12, Safari 5.1.7. I can't test in Mac and I dump Chrome so can't test in that either. Please note that although you have the css IE code for Filter, that doesn't seem to work, that is why you must also have the overfilter and outfilter set. I'm not sure why it doesn't, but I tried removing it frm the rawcss and the css code and for some reason the other browsers stopped doing that transparency, and without the overfilter set but keeping it in the rawcss IE gets touchy. So, I just list them both and that fixed the issue for all of the browsers I tested.

If you have any other issues, just let me know. Just for your information, I am a 'try this, try that' person. I really am not real knowledgeable enough that I can get the answer off the top of my head. I've always been a visual hands on learner, so if something else comes up, it would really be easier for me if you could send me the page and data file. That way I have the layout and colors :)

Good luck!

Ruth
jgold723
Super Advanced
Super Advanced
Posts: 40
Joined: Wed Nov 19, 2003 10:14 pm

Re: Background opacity

Post by jgold723 »

Thanks Ruth! I really appreciate this.

John
Post Reply