change background of an element with a drop down

[Darkorical]

alright first off I have tried searching the forum and only found ideas and no solutions that worked perhaps I haven't searched well enough forgive me for asking again if this is the case.

I am trying to change the background image of a table cell using a drop down menu
I currently have a script to change other images but not for the background image
in the head

function changeImage(filename)
{
 mainimage.src = filename;
}

in the body to display the image

<img border="0" src="./smhandles/red.png" name="mainimage" />

and I'm creating the drop down to change that image using this php script

<select name=Handle onchange="changeImage(this.value)">
<option value="./SmHandles/Red.png">Handle</option>
<?php 
if ($handle = opendir('./SmHandles')) {
 while (false !== ($file = readdir($handle))) {
  if ($file != "." && $file != ".." && $file != "pic" && $file != "SelectorButtons") {
echo "<option value='./SmHandles/$file'>$file</option>";
   }
 }
 closedir($handle);
}
?>
</select>

this works GREAT for the images on the page but I cant seem to adapt it to work for the background of a table

Code for the table

 <table id="bag" style="background-image:url(Sm-Bags/FT11.png); background-repeat:no-repeat" width="325px" height="343px" valign="middle">

can someone help me?

[Receptional Andy]

Hi Darkorical, and welcome to webmasterworld [webmasterworld.com] :)

You can access the table via its ID using getElementById and then change the background by changing style.backgroundImage. So, a quick example:

document.getElementById('bag').style.backgroundImage = "url('/images/example.jpg')";

[Darkorical]

alright I used

function changeImage4(filename)
{
document.getElementById('bag').style.backgroundImage = (filename);
}

with this as my dropdown

<select onchange="changeImage4(this.value)">
<option value="blank">bag</option>
<option value="url(./Sm-Bags/FT1-14x14.jpg)">FT1-14x14</option>
</select>

and it works fine now when I change that image I need the cell height and the ROW width to match the new background I have an image that is always there that needs to scale as well so I decided to base the width on that image

I tried

function changeImage4(filename)
{
document.getElementById('bag').style.backgroundImage = (filename);
}
if (filename == "url(./Sm-Bags/FT1-14x14.jpg)") {
snaps.width = 25%;
}

and that broke it what am I doing wrong?