Добрый вечер уважаемые форумчане
Прошу помочь с кодом
это будущий конструктор, собирает нужную модель из трех картинок наложенных друг на друга
из-за простоты 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';
}
