Change the background image in a table cell

Discussion in 'Javascript' started by Jim, Jul 23, 2008.

  1. Jim

    Jim Guest

    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.
     
    Jim, Jul 23, 2008
    #1
    1. Advertisements

  2. 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
     
    Thomas 'PointedEars' Lahn, Jul 23, 2008
    #2
    1. Advertisements

  3. Jim

    SAM Guest

    Jim a écrit :
    <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>
     
    SAM, Jul 24, 2008
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.