ola sou novo no forum.
e novo em programaçao
gostaria da ajuda pra saber como trocar imagens de divs diferentes,pois uma estra trocando a imagem da outra
e ja´tentei de tudo pra consertar..agradeço muito pela ajuda
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
*{margin:0;padding:0;}
.container{display:flex;justify-content:space-evenly;flex-wrap:wrap;background:#6ab04c;}
.card img{width:100%}
.price {position:absolute;margin:10px 220px;color: #6ab04c;font-size: 20px;}
.card{width:260px;height:350px;justify-content:center;background:#fff;margin:5px}
.nav{display:flex;align-items:center;justify-content:center}
.nav img{display:flex-row;width:80px;height:52px;margin:2px;border: 1px solid #ddd;}
.name{
text-transform: uppercase;
font-size: 20px;
color: #333;
}
.btn{
display:flex;justify-content:center;padding:5px;
background: #6ab04c;
text-align: center;
color: #fff;
transition: 0.3s;}
.dis{
margin:0 0 10px;
font-size: 16px;
opacity: 0.7;}
.product-info{
padding: 20px;background:silver;
}
.btn:hover{
background: #333;
}
</style>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="top-section">
<div class="price">$80</div><img id="image-container" src="1.png" alt="">
<div class="nav">
<img onclick="change_img(this)" src="1.png" alt="">
<img onclick="change_img(this)" src="2.png" alt="">
<img onclick="change_img(this)" src="3.png" alt="">
</div>
</div>
<div class="product-info">
<div class="name">Sanglasses</div>
<div class="dis">Awesome Men Sanglasses</div>
<a class="btn" href="#">Add to Cart</a>
</div>
</div>
<div class="card">
<div class="top-section">
<div class="price">$80</div><img id="image-container" src="1.png" alt="">
<div class="nav">
<img onclick="change_img(this)" src="1.png" alt="">
<img onclick="change_img(this)" src="2.png" alt="">
<img onclick="change_img(this)" src="3.png" alt="">
</div>
</div>
<div class="product-info">
<div class="name">Sanglasses</div>
<div class="dis">Awesome Men Sanglasses</div>
<a class="btn" href="#">Add to Cart</a>
</div>
</div>
<div class="card">
<div class="top-section">
<div class="price">$80</div><img id="image-container" src="1.png" alt="">
<div class="nav">
<img onclick="change_img(this)" src="1.png" alt="">
<img onclick="change_img(this)" src="2.png" alt="">
<img onclick="change_img(this)" src="3.png" alt="">
</div>
</div>
<div class="product-info">
<div class="name">Sanglasses</div>
<div class="dis">Awesome Men Sanglasses</div>
<a class="btn" href="#">Add to Cart</a>
</div>
</div>
</div>
<script type="text/javascript">
var container = document.getElementById("image-container");
function change_img(image) {
container.src = image.src;
}
</script>
</body>
</html>
