Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Image Onclick in a Table

    I want the image in each row of my table to change when clicked, but when I click on any row, it only changes the image in one. Is there a way to make the image change in each row when clicked? Here is my code:

    Code:
    <script type="text/javascript">
    		imgs=Array("http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg","http://i882.photobucket.com/albums/ac26/patdiele/em_dash_u2014_icon_256x256_zpsd44a732b.png","http://i882.photobucket.com/albums/ac26/patdiele/TildeKeyStep1C1210_zps6b35edfe.png","http://i882.photobucket.com/albums/ac26/patdiele/pb_tri_40694_lg_zps1fb5157a.gif","http://i882.photobucket.com/albums/ac26/patdiele/500px-Circle_-_black_simplesvg1_zps7ead9979.png");
    var x=0;
    
    function change() {
    document.getElementById("bob").src=imgs[++x];
    
    if (x==4) {
    x=-1;;
    }
    }
    if (!imgs[x+1]) {
    x=-1;
    }
    </script>
    <style>
    <style type="text/css">
    .tg-left { text-align: left; } .tg-right { text-align: right; } .tg-center { text-align: center; }
    .tg-bf { font-weight: bold; } .tg-it { font-style: italic; }
    .tg-table-plain { border-collapse: collapse; border-spacing: 0; font-size: 100%; font: inherit; }
    .tg-table-plain td, .tg-table-plain th { border: 1px #555 solid; padding: 10px; vertical-align: top; }
    </style>
    </style>
    <body>
    
    <table class="tg-table-plain">
      <tr>
        <th class="tg-bf" style="color: #ffffff;background-color: #16a085">Suspects</th>
        <th class="tg-bf"></th>
      </tr>
      <tr class="tg-even">
        <td>Colonel Mustard</td>
        <td class="tg-center"><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Professor Plum</td>
        <td class="tg-center"><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Mr. Green</td>
        <td class="tg-center"><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Mrs. Peacock</td>
        <td class="tg-center"><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Miss Scarlet</td>
        <td class="tg-center"><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Mrs. White</td>
        <td class="tg-center"><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td class="tg-bf" style="color: #ffffff;background-color: #16a085">Weapons</td>
        <td></td>
      </tr>
      <tr>
        <td>Knife</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Candlestick</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Revolver</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Rope</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Lead Rope</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Wrench</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td class="tg-bf" style="color: #ffffff;background-color: #16a085">Rooms</td>
        <td></td>
      </tr>
      <tr class="tg-even">
        <td>Hall</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Lounge</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Dining Room</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Kitchen</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Ballroom</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Conservatory</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Billard Room</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr>
        <td>Library</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
      <tr class="tg-even">
        <td>Study</td>
        <td><img src="http://i882.photobucket.com/albums/ac26/patdiele/white-square-872x844_zps641b1adf.jpg" id="bob" alt="alttext" onmousedown="change()" style="cursor: pointer;"></td>
      </tr>
    </table>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    First, 'each and every' id in an HTML
    document must be unique.


    Quote Originally Posted by patdiele View Post
    I want the image in each row of my table to change when clicked, but when I click on any row, it only changes the image in one. Is there a way to make the image change in each row when clicked? Here is my code:
    Because every id is the same
    the browser is only recognizing
    the first one it finds, so only
    the first one changes.

    You say "I want the image in each
    row of my table to change when clicked"
    if by that you mean each row my have
    an image different from another row
    then you probably need a way to "remember"
    what image is in the row.


    Fix your ids and post back, then
    we can help you further.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •