Change the background image in a table cell

[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.

 

[Thomas 'PointedEars' Lahn]

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

 

[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.backgroundImage='url(../images/LEC_Q1_faded.jpg)';">
change td_1's image</button>