How can I make a dropdown selection trigger an overlay image?

Question

I have two dropdown menus. The picture that's displayed changes based on the dropdown selection.

I want to make it so that when a User chooses a color and then an overlay, the overlay image displays on top of the color image rather than replacing it.

I'm new to javascript and not sure where to begin to solve this, so any insight at all really helps.

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" />

How can I make a dropdown selection trigger an overlay image?

0 Answers0