Всем доброго времени суток
прошу помочь с кодом
имеется это
<div class="">
<div class="controller_one">
<form>
<select name="imagename" onChange="changeImage(this.form, 'pic1')">
<option title="img/1/some0.png">0</option>
<option title="img/1/some1.png">1</option>
<option title="img/1/some2.png">2</option>
</select>
</form>
</div>
<div class="controller_two">
<form>
<select name="imagename" onChange="changeImage(this.form, 'pic2')">
<option name="light" title="img/2/some0.png">0</option>
<option name="light" title="img/2/some1.png">1</option>
<option name="dark" title="img/2/some2.png">2</option>
<option name="dark" title="img/2/some3.png">3</option>
<option name="light" title="img/2/some4.png">4</option>
<option name="dark" title="img/2/some5.png">5</option>
<option name="light" title="img/2/some6.png">6</option>
</select>
<input type="hidden" data-img="img/light.png">
<input type="hidden" data-img="img/dark.png">
</form>
</div>
<div class="controller_three">
<form>
<select name="imagename" onChange="changeImage(this.form, 'pic3')">
<option title="img/3/some0.png">0</option>
<option title="img/3/some1.png">1</option>
<option title="img/3/some2.png">2</option>
<option title="img/3/some3.png">3</option>
<option title="img/3/some4.png">4</option>
<option title="img/3/some5.png">5</option>
<option title="img/3/some6.png">6</option>
<option title="img/3/some7.png">7</option>
</select>
</form>
</div>
<div class="images">
<div class="null">
<img name="pic1" src="img/1/some0.png" id="layer_0">
</div>
<div name="null">
<img name="pci2" src="img/2/some0.png" id="layer_1">
</div>
<div class="null">
<img name="pic3" src="img/3/some0.png" id="layer_2">
</div>
<div>
<img class="over_ch" src="img/transparent.png" style="display:none;" id="over layer_3">
</div>
</div>
<input type="button" onclick="visibilityLayer('over');" value="Toggle"/>
</div>
<script>
$(function() {
$('select').on('change', function() {
var selector = 'input[data-img*="' + $(this).find("option:selected").attr('name') + '"]';
var image = $(this).parent().find(selector).attr('data-img');
$(this).parent().find('img.over_ch').attr('src', image);
});
});
//overlay chenger
</script>
<script type="text/javascript">
function visibilityLayer(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//toggle
</script>
<script>
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;}
//layer chenger
</script>
проблема в том, что два скрипта (layer chenger и overlay chenger) по отдельности работают правильно
при попытке совместить из работу, overlay chenger на отказ не хочет работать
суть кода в чем, изпользуя слои одного размера с выравниванием по центру делаем будущий макет модели.
т.е. посредством select>option выбираем нужные цвет каждого из слоем
слой overlay скрыт,отображается только по нажатию на toggle , использоваться он по идее должен совмесно с layer_1
в зависимости от значения в атрибуте name из выпадающего списка (привязанного к этому слою) в layer_3 меняется url изображения из скрытых инпутов ниже
оговорюсь...по отдельности скрипты работают отлично,вместе работает только один (layer chenger)
