Показать сообщение отдельно
  #1 (permalink)  
Старый 05.02.2016, 23:28
Интересующийся
Отправить личное сообщение для AlphaKeloid Посмотреть профиль Найти все сообщения от AlphaKeloid
 
Регистрация: 31.01.2016
Сообщений: 14

переключение слоев изображения select
Всем доброго времени суток
прошу помочь с кодом

имеется это
<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)
Ответить с цитированием