jr777
Active member
I want to display banners in my header that would randomly change, but I need them to automatically resize themselves depending on screen width, so that they always display next to the logo, instead of below it. Is there any code I could add to the built in advertising system to make that happen?
I found this, and it works great, I just need to add some code (if possible) that would make the banners automatically resize so as to display next to my logo.
I found this, and it works great, I just need to add some code (if possible) that would make the banners automatically resize so as to display next to my logo.
HTML:
<!doctype html>
<html>
<head>
<title>Banners</title>
<script>
var banners = [];
banners.push({src: "image1.png", alt: "Image 1"});
banners.push({src: "image2.png", alt: "Image 2"});
banners.push({src: "image3.png", alt: "Image 3"});
banners.push({src: "image4.png", alt: "Image 4"});
banners.push({src: "image5.png", alt: "Image 5"});
window.onload = function() {
var index = Math.floor(Math.random() * banners.length);
var ad = document.getElementById("ad");
ad.setAttribute("src", banners[index].src);
ad.setAttribute("alt", banners[index].alt);
ad.style.display = "block";
}
</script>
<style>
#ad {
display: none;
}
</style>
<noscript>
<style>
#ad {
display: block;
}
</style>
</noscript>
</head>
<body>
<img id="ad" src="image1.png" alt="Image 1" />
</body>
Last edited: