Random Banners

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

Thirty-Tip

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.

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()
GoTo[0]="http://www.htmlgoodies.com"
GoTo[1]="http://www.developer.com"
GoTo[2]="http://www.mtv.com"
GoTo[3]="http://www.vh1.com"
GoTo[4]="http://www.whitehouse.gov"	 

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

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());

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]	 

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>") 

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’