use a background image for AnyLink Drop Down Menu

[eTard]

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:

In the .js code you can set the hexadecimal background color in var menubgcolor='666666' and then call it with background-color:'+menubgcolor+'

BUT, I want to make a nice background image that would run the entire length of the drop down menu (no matter if 2 or 10 drop down choices). What alterations would need to be made to this script to use a background image rather than a background color? I would think it would just be altering the definition of var menubgcolor='666666' in some way?

[eTard]

I might have solved it.. but not fully tested it yet...

In the CSS for the #dropmenudiv{ style I added the parameter background-image:url(../images/menubg.jpg) and this seems to override the var menubgcolor='666666' in the .js file

[jscheuer1]

It doesn't actually override it, the background-color and the background-image are two separate style properties. All you've done is added background-image, which will generally appear to override background-color, unless the background-image isn't configured to cover the entire background area, or if it has transparent regions.

In any event, what you've done is perfectly fine. And, as you can see, works quite well.

[eTard]

yeah, works perfect. I checked in mac and PC and about 8 browsers..

In my case, I made a nice top to bottom gradient faded background image about 150 pixels wide by 500 pixels tall and this covers all my drop downs, one of which is 9 options long. The 150 pixels covers the max width of my widest button.

[eTard]

also, FWIW, I also did this to the drop down roll-over color. I wanted an image, rather than a color, so in the css #dropmenudiv a:hover I changed out:

background-color: #990000; to background-image:url(../images/menubgon.gif);