Javascript/CSS question

[ADAM Web Design]

Okay, here's the scenario:

http://www.kastlefireplace.com/newlayout

The menu at the top is giving me a slight bit of grief. If you hover your mouse over the three links on the right, the hover process is more or less smooth (I covered over the new background hover by putting a solid colour background in when I defined the hover property).

The problem is that the background colour property seems to be ignored in my Javascript when the mouse is put over the other menu items (any of the products).

I'm not sure how exactly to solve it but I do have a question that, if anyone's done this or seen this before, may help me solve this:

1) Can an image be preloaded from a Javascript preload and then used as a CSS background image smoothly? I know it can be done if there's an image swap between two foreground images (and has about a billion times), but I've never seen it done for a background image.

Thanks.

[drummin]

Hey ADAMWebDesign,

I don't know anything about JS menus, but I use this CSS background postion swap all the time for links. It might help.

Put all your button images on one picture, aligned vertically with a small space between. Then use CSS to offset the picture.

#menu a {background: url("images/button.gif") no-repeat 0% 0%;
background-position: 0 0px;
height: 18px;
width: 110px;
display: block;
font: bold 10px/1 Tahoma;
color: #FFFFFF;
text-decoration: none;
text-align: center;
margin:0px;
padding:0px;
}
#menu a:hover {background-position: 0 -21px;
color: #00FF66;
height: 18px;
width: 110px;
padding:0px;
text-decoration: none;
}
#menu a:active {color: #F0FFF0;
text-decoration: none;
background: url("images/button.gif") no-repeat 0 -21px;
}


This way the image loads all your button pictures at once.

Might help.
Drummin

[ADAM Web Design]

Thanks for the advice, Drummin, but it won't work in my particular case since the menu is drawn from a database and will change from time to time. I don't want to have to edit the background each time and I want to reuse it.

(note; as of right now, the menu over and off backgrounds are 1x20 pixels, so they aren't very large.)