	JAVASCRIPT

JAVASCRIPT

String Object Methods

Math Object Methods

Window Object Methods

Arrays

JAVASCRIPT RANDOM BANNER GENERATOR

The following tutorial and sample script shows you how to create a random banner generator that rotates banners on your site. You can also use this system to rotate other images, text or links. Each time the page is loaded, a random banner is displayed. Refresh the page a few times to see the banners change at random. See the demo below:

Our first step is to create a function named randomBanners (you can name this as you please) and place an opening { after it as follows:

<script type="text/javascript">

function randomBanners()
{

We then create a new array and call it allBanners as follows:

var allBanners=new Array();

We then feed each element of the array with banners, images, text or links. This can be as many as you like - simply name the elements in the array correctly:

allBanners[0]="<img src='banner1.jpg' />";
allBanners[1]="<img src='banner2.jpg' />";
allBanners[2]="<img src='banner3.jpg' />";
allBanners[3]="<img src='banner4.jpg' />";

We then count the number of elements of the array by using the length method and assign variable l to it:

var l =allBanners.length;

We then create a random number between 0 to 1 using the math random method and assign variable r to it:

var r=Math.random();

We the create variable t and assign to it the product of variables l and r.

var t=l * r;

We then round down t to the lower full number using the floor method and assign that to variable i:

var i = Math.floor(t);

We then use getElementById() to reference a div which we will place in the body and will give it the value of the banner picked at random:

document.getElementById('test').innerHTML = allBanners[i];

We then close the function:

}

</script>

We then place a div anywhere between the <body> and </body> tags and call it test. The name of the div must correspond with the name of the div in getElementById() in the script above.

<div name="test"></div>

We then call the function from the body tag as follows:

<body onload="randomBanners();">

The complete function script which must appear between the <head> and </head> tags is: