By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,830 Members | 1,722 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,830 IT Pros & Developers. It's quick & easy.

Using Javascript to change a cell background image

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.