Tengo dos menús desplegables. La imagen que se muestra cambia según la selección desplegable.
Quiero que cuando un usuario elija un color y luego una superposición, la imagen superpuesta se muestre encima de la imagen en color en lugar de reemplazarla.
Soy nuevo en javascript y no estoy seguro de por dónde empezar a resolver esto, por lo que cualquier idea realmente ayuda.
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" />