Main?Introduction
This section will teach you how to generate a random banner that people
can click to go the corresponding website. This uses JavaScript.
Here is what we will be making. Reload the page over and over and you will see the four different banners.
How To Do It
First, let's look at the code for the entire page:
<html>
<head>
<title>Random Banner Ad</title>
<script language="javascript" type="text/javascript">
<!--
raImg = new Array("googlebanner.gif","beautifybanner.gif","diarylandbanner.gif","somepagebanner.gif")
raUrl = new Array("http://www.google.com","http://beautify.diaryland.com","http://www.diaryland.com","somepage.html")
imgCt = raImg.length
function choosePic() {
if (document.images) {
randomNum = Math.floor ((Math.random() * imgCt))
document.myPicture.src = raImg[randomNum]
}
}
function newLocation() {
document.location.href = raUrl[randomNum]
}
//-->
</script>
</head>
<body onLoad="choosePic()">
<a href="javascript:newLocation()"><img src="googlebanner.gif" name="myPicture" alt="Banner Spotlight" border="0"></a>
</body>
</html>
Feel free to copy and paste all you like. If you go back to the sample, you can view the source code to see the exact HTML, spaces, etc.
"googlebanner.gif","beautifybanner.gif","diarylandbanner.gif","somepagebanner.gif":
Put the URL's of the banners here. Put them in quotations, and sperate each
with a comma, like I have. The adderss can be relative, like I have done, or
the full address, such as http://www.host.com/banner.gif. Take note of what
order you put them in!
"http://www.google.com","http://beautify.diaryland.com","http://www.diaryland.com","somepage.html":
This is where the addresses go. Make sure to put them in the same order as the
banners.
<body onLoad="choosePic()">: Don't forget the onLoad attribute
in the <body> tag!
src="googlebanner.gif": Set the src to one of the banners. It doesn't
really matter which.