PDA

View Full Version : use a background image for AnyLink Drop Down Menu



eTard
11-07-2008, 02:55 PM
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
11-07-2008, 03:14 PM
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
11-07-2008, 03:34 PM
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
11-07-2008, 04:14 PM
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
11-17-2008, 05:04 AM
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);