Изменить фон картинки при выборе ее опции по onclick (через CSS)

364

22 июня 2017, 04:37

Суть в том что есть картинка с прозрачным фоном. В опциях картинки есть выбор ее цвета. При выборе цвета, картинка должна заливаться соответственно им. На автомате стоит черный, далее уже по желанию пользователя, чтобы он визуально представлял что будет и в каком цвете.

Меток около 10 и соответственно могут меняться или добавляться со временем.

Задача что при выборе метки (опции), менялся background-color картинки.

<img class="test" id="det_img_25959497f734a78c_1434" src="123.png" alt="" title=""  style="">
<label id="option_description_259_1_5" class="ty-product-options__box option-items" style=""><input type="radio" class="radio" name="product_data[259][product_options][1]" value="5" checked="checked" onclick="fn_change_options('259', '1', '5');">Чёрный&nbsp;</label>
<label id="option_description_259_1_3" class="ty-product-options__box option-items" style=""><input type="radio" class="radio" name="product_data[259][product_options][1]" value="3" onclick="fn_change_options('259', '1', '3');">Бежевый&nbsp;</label>

Answer 1

Не уверен что понял что именно нужно, но вот:

let img = document.querySelector('#img'); 
 
document.querySelector('#wrapper').addEventListener('click', function(e){ 
  if(e.target.nodeName === 'INPUT') 
    changeColor.call(e.target); 
}); 
 
function changeColor(){ 
  let color = this.dataset.color; 
   
  img.style.background = color; 
}

#img{ 
  width: 80%; 
} 
#wrapper input{ 
  background: none; 
  border: 1px solid black; 
  font-size: 15pt; 
  padding: 5px 10px; 
  margin: 5px; 
} 
#wrapper input:focus{ 
  outline: none; 
}

<img src='http://www.seomofo.com/downloads/new-google-logo-knockoff.png' id='img' /><br /><br /> 
<div id='wrapper'> 
  <input type='button' data-color='#f00' value='Red' /> 
  <input type='button' data-color='#0f0' value='Green' /> 
  <input type='button' data-color='#00f' value='Blue' /> 
</div>

Answer 2

пришел пока к такому варианту... В фидле работает, на сайте нет. Цвета перепутал) 2 раза тыкнуть надо

let img = document.querySelector('.ty-pict');
document.querySelector('#option_description_259_1_5').onclick = function() {
  document.querySelector(".ty-pict").style.backgroundColor = "#000";
};
document.querySelector('#option_description_259_1_1').onclick = function() {
  document.querySelector(".ty-pict").style.backgroundColor = "#fff";
};