Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a e não do javascript . Como resolver?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostrar link do banner que está na tag a</title>
<style>
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
/* opacity: 0; */
transition: opacity 0.5s ease-in-out;
}
.banner-link {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="banner">
<a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a>
<a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a>
<a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a>
<a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a>
<a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a>
</div>
<script>
const images = document.querySelectorAll('.banner-img');
const banner = document.getElementById('banner');
function showRandomImage() {
const randomIndex = Math.floor(Math.random() * images.length);
const randomImage = images[randomIndex];
const imgElement = document.createElement('img');
imgElement.src = randomImage.src;
imgElement.alt = randomImage.alt;
imgElement.classList.add('banner-img');
const linkElement = document.createElement('a');
// linkElement.appendChild(imgElement);
linkElement.href = randomImage.href;
linkElement.classList.add('banner-link');
linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem
linkElement.appendChild(imgElement);
banner.innerHTML = '';
banner.appendChild(linkElement);
}
showRandomImage();
setInterval(showRandomImage, 1000);
</script>
</body>
</html>
Resolvido, Obrigado a todos !Carregando comentários...