sssema96,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.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;
}
body{
position: relative;
}
#open_img{
position: absolute;
}
.show-image{
outline: none;
}
</style>
<script>
window.addEventListener( "load" , function() {
const buttons = document.querySelectorAll('.show-image'),
div = document.getElementById('open_img'),
img = new Image;
buttons.forEach(function(btn){
const {link, top, left} = btn.dataset;
btn.addEventListener('click', function(){
img.src = link;
div.append(img);
Object.assign(div.style, {top,left})
});
});
});
</script>
</head>
<body>
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?1"
data-top="100px" data-left="80px"
type="button" id="click_red2"></button>
<button class="show-image red_button_2" data-link="https://picsum.photos/170/120?2"
data-top="200px" data-left="280px"
type="button" id="click_red2"></button>
<div id="open_img"></div>
</body>
</html>