Menu
I'm new to HTML, JavaScript, CSS, and am taking a Web Design class. I'm required to make a banner ad that alternates between two different images (banner1.jpg & banner2.jpg). The problem I'm having is when my site loads it displays banner1.jpg above the <h2>, and court.jpg below. Then it changes court.jpg to banner2.jpg then to banner1.jpg, alternating back & forth between the two banners. The banner1.jpg above the <h2> stays static. Here's the relevant code:
<script type="text/javascript">
/* <![CDATA[ */
var curImage="banner1";
function bannerAd() {
if (curImage == "banner2") {
document.images[1].src = "images/banner1.jpg";
curImage = "banner1";
}
else {
document.images[1].src = "images/banner2.jpg";
curImage = "banner2";
}
}
/* ]]> */
</script>
</head>
<body onload="var changeImages=setInterval('bannerAd()', 2000);">
<header>
<h1>Basketball Almanac</h1>
</header>
<section class="main">
<img src="images/banner1.jpg" alt="Banner image" />
<h2>Basketball Analysis</h2>
<p><span class="companyname">Basketball Almanac</span> is your one-stop site for in-depth basketball analysis and statistics.</p>
<img class="main" src="images/court.jpg" alt="NBA Court" />
How do I make it so only banner1.jpg changes? Thanks in advance for any help, and let me know if it would help to include more of the code here.
920
asked Apr 28 '26 19:04
Simple, in javascript, arrays are 0 based, so the frist object is [0]
So you want
var curImage="banner1";
function bannerAd() {
if (curImage == "banner2") {
document.images[0].src = "images/banner1.jpg";
curImage = "banner1";
}
else {
document.images[0].src = "images/banner2.jpg";
curImage = "banner2";
}
}
or to simplify it a little
var curImage="images/banner2.jpg";
function bannerAd() {
if (curImage == "images/banner1.jpg") {
curImage= "images/banner2.jpg";
}
else {
curImage = "images/banner1.jpg";
}
document.images[0].src = curImage;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
