LanguagesJavaScriptRandom Banners

Random Banners content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


New script today! Again, this one is by request. It’s a random banner script. I wrote this one so feel free to use it. The script uses two arrays and five images to get its effect. The script posts a random banner. What’s more, the banner is active. You can click on it to go where the banner reads. It’s a quick script that can be used in myriad ways.

I have every intention of doing this entire script in this one lesson. It’s all review. I’ll offer links to other Script Tips in case some of this is new to you, but other than that we’ll roll through this one pretty quickly.

You’ll need to hit reload a few times and put your pointer on top of the new banner to see the entire effect.


Here’s the Effect

Take a look at the script.


This one shouldn’t take us too long. There’s nothing new here. Each little section has been covered in another Script Tip, but after 33 tips, it’s probably a good idea to roll through a script with lots of familiar coding and see how that coding could be used to make something different than before. It is, dare I say, a review?

The Arrays

banners = new Array()
banners[0]="<IMG BORDER=0 SRC=/common/content/article/19990123/hg_scripttip34/banner0.gif>"
banners[1]="<IMG BORDER=0 SRC=/common/content/article/19990123/hg_scripttip34/banner1.gif>"
banners[2]="<IMG BORDER=0 SRC=/common/content/article/19990123/hg_scripttip34/banner2.gif>"
banners[3]="<IMG BORDER=0 SRC=/common/content/article/19990123/hg_scripttip34/banner3.gif>"
banners[4]="<IMG BORDER=0 SRC=/common/content/article/19990123/hg_scripttip34/banner4.gif>"

GoTo = new Array()

The script starts off with two arrays. I go over arrays pretty hard in Script Tip 31,
Full Text Date

The first array, named banners, is a series of five images. Those are our banners. They look like this, banner0.gif through banner4.gif:

Notice that there are double quotes surrounding each indexed item so we know each is to be handled as if it were just simple text. Notice also that there are no quotes around the zero or the name of the image. That would mess up the script by stopping the line too early. Error.

The second array contains the URLs that will match the banners. Note that the URLs are in the same order as the banners. That way, we can use the same number to call for an element from each array. For example, the first banner reads “HTML Goodies Home Page.” The first GoTo array item is the URL for HTML Goodies. Now we can use the number zero to return both the Goodies banner and the Goodies URL. With me?

The Random Number

var Number = Math.round(4 * Math.random());

Remember that code from the
Random Number Generator
tip? The variable number is assigned a random number between zero and four.

That number is created by multiplying 4 times a random number between 000 and 999 created by the “Math.random” commands. The numbers returned can be 0, 1, 2, 3, or 4. The “Math.round” object.method statement makes sure the number is rounded off so there are no remainders in the result.

Calling for the Array Index

var TheLink = GoTo[Number]
var TheImage = banners[Number]	 

Two new variable names are created. TheLink represents the text return from the GoTo array. The variable TheImage represents the return from the banners array.

In both cases, the same number, the random number we created earlier, is used to choose the item from both arrays. That way we know all the banners/URLs will line right up.

Write It To The Page

I hit this pretty hard in the
Using JavaScript to Create HTML Tags
tip. We’re going to use JavaScript to build a line of HTML. Since this HTML will create something on the page, remember to place this script wherever on the page you wish the effect to appear.

document.write("<CENTER><A HREF=" +TheLink+ ">" +TheImage+ "</A></center>") 

We’re using a document.write() statement to get it to the page. Notice the A HREF command is fully built. We’re just filling in the blanks. The two text strings from the arrays are placed and the entire line of HTML is centered.

When the page displays, the banner is centered on the page and it’s active to the URL it is representing.

Now — What Would You Do?

See how I’ve taken parts from other scripts and built something new? You can do that. Using just what’s on this page you could make a random line of text come up on your page, or use a function to enact the script so it offers random fortunes, like the Magic 8-Ball. You can do it.

Enough Review!

Next week we’ll get into a script with some new stuff.

Next Time: Scrollin’ Scrollin’ Scrollin’

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories