How can I set the background image of a link?

[abduraooft]

Hello all,
thanks for visiting my post...

I have a simple menu with each items place on adjacent rows of a table, and I'm using two images to display as background for all of them and they get switched to and fro on mouse over and mouse out (Using the same two images to reduce the total image size)

Currently the effect is working with the help of CSS.

Now I want add submenus for them using javascript and they get displayed on mouseover and hided on mouse out, while keeping the previous effect as such.

A row looks like
<tr>
<td height="16" background="images/tabs/2.gif"><a href="#" class="tabs" name="tab1" onMouseOver="Select('1');dropdownmenu(this, event, menu1, '120px');" onMouseOut="delayhidemenu();">What is New</a></td>
</tr>
where as my css is

.tabs
{
background-image: url(images/tabs/2.gif);
}
a.tabs:link
{
background-image: url(images/tabs/2.gif);
}

a.tabs:hover
{
COLOR: #4F30FA;
text-decoration: underline;
background-image: url(images/tabs/2_m.gif);
}

My intention is to keep the mouseover image on the main menu item even if my mouse is over its sub menu, so that i'll get a feeling that i'm viewing the submenu of that particular main menu item.

My problem is when i move to submenu, the mouseout of css will get in action and the background changes back to its initial position.

I want to keep the background image untill I move mouse to another main item or I leave from the entire menu.

I can set a hidden value on mouse over and i wish to set the mouse over image for that particular item from the javascript function which displaying the submenu.

Can i overrride the CSS effect with Javascript, if yes please let me know the way to set the background using javascript

regards,

art.