Как я могу сделать так, чтобы выпадающий выбор вызывал наложение изображения?

avatar
Megan Kuhn
8 августа 2021 в 17:30
48
0
1

У меня есть два выпадающих меню. Отображаемое изображение меняется в зависимости от выбора в раскрывающемся списке.

Я хочу сделать так, чтобы когда пользователь выбирает цвет, а затем наложение, изображение наложения отображалось поверх цветного изображения, а не заменяло его.

Я новичок в javascript и не знаю, с чего начать решение этой проблемы, поэтому любая информация действительно помогает.

var changeColorImage = function() {
  document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}

var colorList = document.getElementById('ColorList');
colorList.addEventListener('change', changeColorImage, false);


var changeOverlayImage = function() {
  document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}

var overlayList = document.getElementById('OverlayList');
overlayList.addEventListener('change', changeOverlayImage, false);
img {
  margin: 50px;
  width: 100px;
}
<select id="ColorList">
  <option value="none">None</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

<select id="OverlayList">
  <option value="overlay_1">Overlay 1</option>
  <option value="overlay_2">Overlay 2</option>
  <option value="overlay_3">Overlay 3</option>
</select>

<img id="image" src="none_Image.png" />
Источник

Ответы (0)