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;
}
.open_img img{
position: absolute;
}
.open_img {
position: relative;
width: 300px;
height: 300px;
border: 1px red solid;
}
.show-image {
outline: none;
}
</style>
<script>
window.addEventListener("load", function() {
const button = document.querySelector('.show-image'),
divs = document.querySelectorAll('.open_img'),
data = [{
link: "https://picsum.photos/170/120?1",
top: "100px",
left: "80px",
index: 0
},
{
link: "https://picsum.photos/170/120?2",
top: "50px",
left: "50px",
index: 1
}
],
elems = data.map(({link, top, left,index}) => {
const div = divs[index], img = new Image;
img.src = link;
Object.assign(img.style, {top, left})
return {div, img}
})
button.addEventListener('click', function() {
elems.forEach(({div, img}) => div.append(img))
});
});
</script>
</head>
<body>
<button class="show-image red_button_2" type="button"></button>
<div class="open_img"></div>
<div class="open_img"></div>
</body>
</html>