2 Replies Latest reply on Jan 24, 2011 5:43 PM by bbfrench

    Show/Hide Elements - how do I hide an image when you click on another

    bbfrench

      I have a photo library page with 10 images on it. I organized it where there is a large image on the left side of the page and 10 rollover thumbnails on the right. I have placed the larger images in separate hidden AP Divs. I want the large image to show up when the user clicks on the corresponding thumbnail. This is working well but how do I get the image to "hide" when the user clicks on a different thumbnail.

       

      Can you help?

       

      Here is my code:

       

      <div id="water1" style="position:absolute; left:20px; top:50px; width:630px; height:491px; z-index:100; visibility: hidden;"><img src="../media/images/water/water1.jpg" width="650" height="500" alt="water1"></div>
        <div id="water2" style="position:absolute; left:20px; top:50px; width:630px; height:491px; z-index:103; visibility: hidden;"><img src="../media/images/water/water2.jpg" width="650" height="500" alt="water2"></div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="20" height="20"> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td width="20"> </td>
          </tr>
          <tr>
            <td height="20"> </td>
            <td height="30" class="copy18grey">Water Applications</td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td width="650" height="500" rowspan="5" valign="top"><img src="../media/images/water/water1.jpg" width="650" height="500" alt="water1"></td>
            <td height="100"><a href="#" onMouseOver="MM_swapImage('Image12','','../media/images/water/water1_thmb_over.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../media/images/water/water1_thmb.jpg" name="Image12" width="160" height="100" border="0" onClick="MM_showHideLayers('water1','','show')" onDblClick="MM_showHideLayers('water1','','hide')"></a></td>
            <td><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td height="100"><a href="#" onMouseOver="MM_swapImage('Image13','','../media/images/water/water2_thmb_over.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../media/images/water/water2_thmb.jpg" name="Image13" width="160" height="100" border="0" onClick="MM_showHideLayers('water2','','show')" onDblClick="MM_showHideLayers('water2','','hide')"></a></td>
            <td><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td height="100"><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td height="100"><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td height="100"><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td><img src="../media/images/test.jpg" alt="" width="160" height="100"></td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
        </table>