Jump to content

turfeaugusto2

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About turfeaugusto2

  1. turfeaugusto2

    mudar imagens em divs

    Obrigado por dedicar um pouco do seu tempo pra responder minha pergunta... Mas meu projeto é diferente de uma galeria.. São vários cards numa página.. E cada card precisa ser autônomo.. Mas mesmo assim agradeço a atenção
  2. turfeaugusto2

    mudar imagens em divs

    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>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.