[sssema96]

Здравствуйте. Есть 2 штуки button - красная и зеленая при нажатии на которые выводятся изображения которые накладываются друг на друга, нужно как-то организовать тоже самое только что бы эти изображения выводились в заданных координатах. Алгоритм такой: нажал на зеленую кнопку появилось 1-е изображение, нажал на красную кнопку первое исчезло и появилось 2-е изображение.

<style>
.green_button_2 {
      background-image: url("img/Green Button.png"); /*фон красной кнопки*/
      width: 53px; /*размер кнопки по ширине*/
      height: 59px; /*размер кнопки по высоте*/
      cursor: pointer;
    }
    .red_button_2{
      background-image: url("img/Red Button.png"); /*фон зеленой кнопки */
      width: 53px; /*размер кнопки по ширине*/
      height: 59px; /*размер кнопки по высоте*/
      cursor: pointer;
    } </style>
<button class="show-image red_button_2" data="img/red led.png" type="button" id="click_red2"></button>   <!--1-е изображение red led.png -->
<button class="show-image green_button_2" data="img/Gren led.png" type="button" id="click_green2"></button>   <!-- 2-е изображение Gren led.png -->
<div id="open_img"></div>

window.onload = function(){
  let buttons = document.querySelectorAll('.show-image');
 
  buttons.forEach(function(btn){
    btn.addEventListener('click', function(){
 
      document.getElementById('open_img').innerHTML = '';
 
      let link = this.getAttribute('data');
      let img = document.createElement('img');
 
      img.src = link;
 
      document.getElementById('open_img').append(img);
 
    });
  });
};