Javascript: changing background-image on table

My question deals with a Javascript problem I am having.

I have a client that wants me to create a tabbed menu type interface for them with different colored tabs and when you click on one of these colored tabs the main body background should change color.  This is no problem I just simply use a function with  a routine like document.body.style.backgroundColor=hexnumber;

The problem comes in that in order to give a more 3D look at the end of the background is a shadow image that gives it a semi embossed look which is found on the left side, right side and bottom. The bottom uses two colors for its image to account for some of the white innertable as well as to create a strip of background color to make it look finished.

What needs to happen at least the way I see it is that each time javascript changes the body color with an onclick event attached to each given tab it also needs to change the shadow images on the left, right, and bottom areas of the site to reflect a darker color of what ever the body color was changed to.  Problem is I haven't been able to figure out how this could be achieved.  The tag that needs some modifications is a td tag within a table that is within another table if that makes any sense to you.

I gave this td tag an id name of shadowleft and put some initial specs in the #shadowleft id in the css file but every time I try to change the backgroundImage property via Javascript it just won't work.  The best I could get to happen is to have the javascript get rid of the graphics altogether rather then swap them for the ones requested.

I was using the getElementById method to try and achieve this but it did not seem to work at all

Here are the functions I used:

<script type="text/javascript">

function changeColor(hex)
{
document.body.style.backgroundColor=hex;
}

function changeShadowImage(shadowleft, shadowleftimage, shadowright,  shadowrightimage, shadow, shadowbottom)

{
document.getElementById (shadowleft).style.backgroundImage="url('shadowleftimage')";

document.getElementById (shadowright).style.backgroundColor=shadowleftimage;

document.getElementById (shadow).style.backgroundImage="url('shadowbottom')";

}

</script>

here are the calls I used:

<p><a href="http://localhost/dotnetnuke/Media/MediaContactsforBerkshireVenues/JimneyPeakPage/GalleryPage/tabid/547/Default.aspx" onclick="changeColor('#000000');changeShadowImage('shadowleft','/Portals/_default/Skins/HomePage/images/shadow_left-t.gif','shadowright','#ffffff','bottomcap','/Portals/_default/Skins/HomePage/images/bottom_cap.gif')" target="hometab">test</a></p>

Thanks for any help you might be able to offer.