background images + changing

Changing background images using Javascript

[Lain]

I'm working on an interface that will have multiple themes. The theme will be selected by dropdown menu. When a user selects the theme the script needs to change the background images of certain cells.

According to the DOM table on [w3schools.com...] the background attribute is not W3C standard.

the cell is coded as

<td width="20" height="20" id = "cornertopleft" background = "images/cornertopleft.gif"></td>

the javascript is (theme will be set in another section of code)

document.getElementById("cornertopleft").background = "images/" + theme + "cornertopleft.gif"

this works in MS Internet Explorer but not Firefox

I need some help with getting this to work, or an alternative to using the background attribute, perhaps a stylesheet that can change? (I'm terrible CSS and Javascript associated with CSS)

any help would be greatly appreciated
Thanks

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

Two things ...

1) you probably want to have some form of content in the cell, even if it's just a non-breaking space (&nbsp;), or else the cell itself will not show up in all browsers.

2) while you are absolutely right that

background

has been deprecated in favor of CSS equivalents, I still believe it should work in Firefox (may be a side effect of the cell being all empty)

To apply the background using CSS, instead of:

document.getElementById("cornertopleft").background = "images/" + theme + "cornertopleft.gif"

do this:

document.getElementById("cornertopleft").[b]style.[/b]background[b]Image[/b] = "[b]url([/b]images/" + theme + "cornertopleft.gif[b])[/b]"

[Lain]

I have a height and width specified so in any decent browser is should display properly, I want to avoid any cell content so the background seems to be a solid entity.

using the CSS alternative worked in firefox, thanks