Change background-image in table cell with a button click

Looking for a script

[onefiftyfour]

Im looking for a script that will alow me to use a button to change the bg image in a table cell if anyone could help it would be greatly appreciated.

[tedster]

Welcome to WebmasterWorld, onefiftyfour.

I haven't got a copy/paste solution - but this kind of script should be relatively simple to figure out. Here's an approach:

1. Declare the original background-image for the table cell with CSS. A background="url.gif" attribute is NOT valid HTML. For more information on this, see our recent discussion about background images and tables [webmasterworld.com].

2. Give the table cell an id so a script can reference it. Let's say id="swapper"

3. The button should be in an anchor tag for good cross-browser performance.

4. The code snippet that changes the image would then look something like onClick="swapper.background-image=url(newimage.gif)"

[starway]

I used to try to do this a while ago, but didn't succeed. Maybe you'll be more lucky? Here's what I did:

As you probably know, you can change style of an element using DOM:

function changeColor(element, col) {
document.getElementById(element).style.color = col;
}

You should call it like this:
... <td id="one" onClick="changeColor('one', '#eeccff')"> ...

This works great not only for color but, for example, for backgroung color (using style.backgroundColor in script) as well.
But when it comes to background image, this method by some reason fails... The following doesn't work:

function changeColor(element, backImage) {
document.getElementById(element).style.backgroundImage = backImage;
}

Then I recalled that in order to set a background image in CSS, you have to use this:
{ background-image: url("image.gif") }

So I tried this:

function changeColor(element, backImage) {
document.getElementById(element).style.backgroundImage = eval("url('" + backImage "')";
}

This doesn't work as well.
At this point I gave up. Maybe somebody will find an error im my idea and will correct it?

P.S. Here's a list of CSS properties that can be changed via script with DOM referencing:
[w3.org...]
(Look at the "Object CSS2Properties" list at the bottom)