Mostrar Conjunto de Imagenes

[DarkSoquet]

perdon por retomar tan tarde, es que no logre dar con los ejemplo y concejos que me daban, y al final logre hacerlo de otra manera, no tan optima pero funciona CASI como yo queria =D, digo casi porque puedo mostrar las imagenes y ocultarlas por grupos, el problema esta en que para ocultar todas y que me muestre 1 solo grupo primero debo hacer click en cada uno de los grupos para ocultarlos, les dejo el codigo haber si me tiran un cable....
PD: no me reten....=P

Código HTML:

<li><a href="Productos.html">PRODUCTOS</a>
                        <ul>
                             <li><a href="#"onclick="mostrar('Rack')">Racks</a></li>
                             <li><a href="#"onclick="mostrar('Bahuits')">Bahiuts</a></li>
                             <li><a href="#"onclick="mostrar('Roperos')">Roperos</a></li>
                             <li><a href="#"onclick="mostrar('Modular')">Modulares</a></li>
                             <li><a href="#"onclick="mostrar('Juego')">Juego de Dormitorio</a></li>
                             <li><a href="#"onclick="mostrar('Bajo')">Bajo Mesadas y Alacenas</a></li>
                             <li><a href="#"onclick="mostrar('Botineros')">Botineros y Mesas Ratonas</a></li>
                         </ul>
                    </li>
 
<div id="container" class="container">
            <div id="Rack">
            <img  src="Imagenes/Productos/Rack TV_small.jpg" alt="Rack TV" width="162" height="120"/>
            <img  src="Imagenes/Productos/Rack TV2_small.jpg" alt="Rack TV2" width="162" height="120"/>
            </div>
            <div id="Bahuits">
            <img  src="Imagenes/Productos/Bahuits1_small.jpg" alt="Bahuits1" width="162" height="120"/>
            <img  src="Imagenes/Productos/Bahuits2_small.jpg" alt="Bahuits2" width="162" height="120"/>
            <img  src="Imagenes/Productos/Bahuits3_small.jpg" alt="Bahuits3" width="162" height="120"/>
            </div>
            <div id="Roperos">
            <img src="Imagenes/Productos/ropero_small.jpg" alt="Ropero" width="162" height="120"/>
            <img src="Imagenes/Productos/ropero2_small.jpg" alt="Ropero2" width="162" height="120"/>
            </div>
            <div id="Modular">
            <img src="Imagenes/Productos/Modular1_small.jpg" alt="Modular1" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular2_small.jpg" alt="Modular2" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular3_small.jpg" alt="Modular3" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular4_small.jpg" alt="Modular4" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular5_small.jpg" alt="Modular5" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular6_small.jpg" alt="Modular6" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular7_small.jpg" alt="Modular7" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular8_small.jpg" alt="Modular8" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular9_small.jpg" alt="Modular9" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular10_small.jpg" alt="Modular10" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular11_small.jpg" alt="Modular11" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular12_small.jpg" alt="Modular12" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular13_small.jpg" alt="Modular13" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular14_small.jpg" alt="Modular14" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular15_small.jpg" alt="Modular15" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular16_small.jpg" alt="Modular16" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular17_small.jpg" alt="Modular17" width="162" height="120"/>
            <img src="Imagenes/Productos/Modular18_small.jpg" alt="Modular18" width="162" height="120"/>
            </div>
            <div id="Juego">
            <img src="Imagenes/Productos/Juegodedormitorio_small.jpg" alt="Juegodedormitorio" width="162" height="120"/>
            </div>
            <div id="Bajo">
            <img src="Imagenes/Productos/Bajo Mesada_small.jpg" alt="Bajo Mesada" width="162" height="120"/>
            </div>
            <div id="Botineros">
            <img src="Imagenes/Productos/botinero_small.jpg" alt="botinero" width="162" height="120"/>
            </div>
        </div>
 

Código Javascript:

<script>
        idImagenVisible="Rack";
        idImagenVisible="Bahuits";
        idImagenVisible="Roperos";
        idImagenVisible="Modular";
        idImagenVisible="Juego";
        idImagenVisible="Bajo";
        idImagenVisible="Botineros";
        
        function mostrar(id)
        {
            // esconedemos la imagen visible
            document.getElementById(idImagenVisible).style.display="none";
            // mostramos la imagen seleccionada
            document.getElementById(id).style.display="block";
            // guardamos en la variable la imagen que estamos visualizando
            idImagenVisible=id;
        }
    </script>