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

Change the background image in a table cell

P: n/a
Jim
How can I use JavaScript to change a background image in a table cell?

Here's the code for the cell

<td width="338" valign="top" background="../images/
LEC_Q1.jpg"><div align="right"></div></td>

You can see that the background is set to the image LEC_Q1.jpg. I
want to change the image LEC_Q1.jpg to LEC_Q1_faded.jpg after a user
clicks a button and the only way I can figure out to do it is by using
JavaScript somehow.
Jul 23 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Jim wrote:
How can I use JavaScript to change a background image in a table cell?

Here's the code for the cell

<td width="338" valign="top" background="../images/
LEC_Q1.jpg"><div align="right"></div></td>

You can see that the background is set to the image LEC_Q1.jpg. I
want to change the image LEC_Q1.jpg to LEC_Q1_faded.jpg after a user
clicks a button and the only way I can figure out to do it is by using
JavaScript somehow.
1. refToTD.background = "...";

2. You want to use CSS and

refToTD.style.backgroundImage = "url(...)";

instead.

3. You don't want to use an empty table cell here, and probably also not
tables in the first place, but a properly positioned `img' element
instead. A table is a table is a table. [psf 3.8]
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Jul 23 '08 #2

P: n/a
SAM
Jim a écrit :
How can I use JavaScript to change a background image in a table cell?

Here's the code for the cell

<td width="338" valign="top" background="../images/
LEC_Q1.jpg"><div align="right"></div></td>

You can see that the background is set to the image LEC_Q1.jpg. I
want to change the image LEC_Q1.jpg to LEC_Q1_faded.jpg after a user
clicks a button
<td width="338" valign="top"
style="background:url(../images/LEC_Q1.jpg)no-repeat center center"
onmouseover="this.style.backgroundImage='url(../images/LEC_Q1_faded.jpg)';"
onmouseout="this.style.backgroundImage='url(../images/LEC_Q1.jpg)';">

<td id="td_1" width="338" valign="top"
style="background:url(../images/LEC_Q1.jpg)no-repeat center center">

<button
onclick="document.getElementById('td_1').style.bac kgroundImage='url(../images/LEC_Q1_faded.jpg)';">
change td_1's image</button>

--
sm
Jul 24 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.