Using Javascript to change a cell background image

[Mark]

IE creates an object of every ID'd HTML tag (so it appears), and each
object sets a property for any parameter I set in the tag. For example,
my HTML might be: <td id='cell1' background='myimg.jpg' width='30'> ...
</td> which IE will use to create a Javascript object called 'cell1'
with properties of background and width, like so:
cell1.background would have a value of 'myimg.jpg' and cell1.width would
have a value of 30.

I can change the width of the cell in my Javascript function using:
document.getElementById('cell1').width = 25;
and I can change the background using
document.getElementById('cell1').background = "yourimg.jpg";

But this doesn't work in all browsers because they (FireFox, for
example) doesn't create an object property (such as "width" and
"background") for each tag with an ID.

How do I get around this using non-IE browsers? I want my Javascript to
be able to change the background image of a table cell. It works in IE,
but not FireFox. I haven't tried others yet.

Mark

 

[Randy Webb]

Mark said the following on 7/29/2006 10:19 AM:

IE creates an object of every ID'd HTML tag (so it appears), and each
object sets a property for any parameter I set in the tag. For example,
my HTML might be: <td id='cell1' background='myimg.jpg' width='30'> ...
</td> which IE will use to create a Javascript object called 'cell1'
with properties of background and width, like so:
cell1.background would have a value of 'myimg.jpg' and cell1.width would
have a value of 30.

Welcome to the quirks and stupidity of IE.

I can change the width of the cell in my Javascript function using:
document.getElementById('cell1').width = 25;
and I can change the background using
document.getElementById('cell1').background = "yourimg.jpg";

But this doesn't work in all browsers because they (FireFox, for
example) doesn't create an object property (such as "width" and
"background") for each tag with an ID.

No browser does it other than IE, that I know of.

How do I get around this using non-IE browsers? I want my Javascript to
be able to change the background image of a table cell. It works in IE,
but not FireFox. I haven't tried others yet.

Use CSS and then change it's style properties:

<td id="cell1" style="background-image:myimg.jpg;width:30px">

document.getElementById('cell1').style.backgroundImage = 'newImage.jpg';
document.getElementById('cell1').style.width = '22px';

 

[Mark]

Use CSS and then change it's style properties:

<td id="cell1" style="background-image:myimg.jpg;width:30px">

document.getElementById('cell1').style.backgroundImage = 'newImage.jpg';
document.getElementById('cell1').style.width = '22px';

Thanks! This does the trick!

Mark