[AlphaKeloid]

Добрый вечер уважаемые форумчане

Прошу помочь с кодом



это будущий конструктор, собирает нужную модель из трех картинок наложенных друг на друга
из-за простоты js кода, можно расширить
потребность возникла в новом слое,который будет доступен при нажатии toggle кнопки (уже решено),слой накладывается поверх остальных (с наложение уже разобрался) и изменяется в зависимости от значения value в форме first
т.е.
если в форме first из выпадающего списка выбран пункт "3" со значением value= "dark" то картинка менялась бы на for_dark .png
если value= "light" картинка меняестя на for_light .png

вся замена картинок происходив в блоке images
новый слой с именем overlay

<input type="button" onclick="toggle_visibility('over');" value="Toggle"/>
 
 
<div>
    <div class="controller_1">
        <form name="first">
        <select name="imagename" onChange="changeImage(this.form, 'pic1')">
            <option value="light" title="some_img1.png">1</option>
            <option value="light" title="some_img2.png">2</option>
            <option value="dark" title="some_img3.png">3</option>
        </select>
        </form>
    </div>
    <div class="controller_2">
        <form>
        <select name="imagename" onChange="changeImage(this.form, 'pic2')">
            <option title="one/some_img1.png">1</option>
            <option title="one/some_img2.png">2</option>
            <option title="one/some_img3.png">3</option>
            <option title="one/some_img4.png">4</option>
            <option title="one/some_img5.png">5</option>
            <option title="one/some_img6.png">6</option>
            <option title="one/some_img7.png">7</option>
        </select>
        </form>
    </div>
    <div class="controller_3">
        <form>
        <select name="imagename" onChange="changeImage(this.form, 'pic3')">
            <option title="some/some_img1.png">1</option>
            <option title="some/some_img2.png">2</option>
            <option title="some/some_img3.png">3</option>
            <option title="some/some_img4.png">4</option>
            <option title="some/some_img5.png">5</option>
            <option title="some/some_img6.png">6</option>
        </select>
        </form>
    </div>
    <div class="images">
        <div class="null">
            <img name="pic1" src="some_img0.png" alt="">
        </div>
        <div name="null">
            <img name="pci2" src="one/some_img0.png" alt="">
        </div>
        <div class="null">
            <img name="pic3" src="some/some_img0.png" alt="">
        </div>
        <div>
            <img id="over" name="overlay" src="transtarent.png" alt="">
        </div>
    </div>
</div>

//меняет изображение в слоях "null" на выбранное значение из выпадающего списка 


function changeImage(form, pic1) {selection = form.imagename.options[form.imagename.selectedIndex].title; document.images[pic1].src = selection;}
function changeImage(form, pic2) {selection = form.imagename.options[form.imagename.selectedIndex].title; document.images[pic2].src = selection;}
function changeImage(form, pic3) {selection = form.imagename.options[form.imagename.selectedIndex].title; document.images[pic3].src = selection;}

//простенький toggle. показывает и скрывает слой


function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }