471,305 Members | 1,105 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,305 software developers and data experts.

Using Javascript to change a cell background image

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'...
</tdwhich 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
Jul 29 '06 #1
2 21791
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'...
</tdwhich 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.backgroundI mage = 'newImage.jpg';
document.getElementById('cell1').style.width = '22px';

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jul 29 '06 #2
Use CSS and then change it's style properties:

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

document.getElementById('cell1').style.backgroundI mage = 'newImage.jpg';
document.getElementById('cell1').style.width = '22px';
Thanks! This does the trick!

Mark
Jul 30 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by John A. | last post: by
5 posts views Thread by Doug Laidlaw | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.