javascript-iconI decided to just go ahead follow up my previous post on how to make a banner ad rotator PHP script. This one is just as simple, but is a client-side script, instead of server-side like PHP. So if your web server doesn’t have PHP installed, you can use this Javascript to rotate banners ads.

Open the Javascript tags, <script language=”JavaScript”></script>, and setting the variables/size of the images you are going to display:

1
2
3
var img_width = "125";
var img_height = "125";
var img_title = "Click Here";

I am just using a normal banner size but you can use whatever you want. The width and height dimensions will be recognize as pixels, so you don’t need to include px. The title variable is what will show up when you hover your mouse over the banner images.

Next we need to create separate arrays for each banner ad, which will store the site link and image source of the banner,

1
2
var links= new Array()
var pic=new Array()

Now create a variable for the new array. In programming, 0 is the starting point for arrays and counters, etc. When you create a counter, it counts 0,1,2,3 etc. So here 0 is the first positions of the array.

1
2
3
4
5
6
7
8
9
// insert images here
pic[0]='gr.gif';
pic[1]='tf.gif';
pic[2]='aj.gif';

// insert links here
links[0]='http://graphicriver.net/?ref=jaredwilli';
links[1]='http://themeforest.com/?ref=jaredwilli';
links[2]='http://audiojungle.com/?ref=jaredwilli';

Increment the array position by 1 for each additional link and image you decide to have, and YOU MUST make sure that the position in the array each of your images are matches up with the links position. By position I mean the numbers you set pic[1] goes with link[1], pic[0] with link[0], and so on. They be incorrectly linked if they don’t match up here.

Finally, we need to write the code which displays all the information for each banner.

1
2
var xy=Math.floor(Math.random()*ad.length;
// generates a random digit, then makes it a whole number

This is gathering all the information from the array, and then goes down the array and echos the information out into the HTML code we embedded the javascript code in. Every time the page refreshes it will show a different banner image if you have more than one in the array.

Here is the entire code combined:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var img_width = "125"; // define width
var img_height = "125";  // define height
var img_title = "Click Here"; // define image title

// create the image and link arrays
var links= new Array()
var pic=new Array()

// insert images here
pic[0]='gr.gif';
pic[1]='tf.gif';
pic[2]='aj.gif';

// insert links here
links[0]='http://graphicriver.net/?ref=jaredwilli';
links[1]='http://themeforest.com/?ref=jaredwilli';
links[2]='http://audiojungle.com/?ref=jaredwilli';

var xy=Math.floor(Math.random()*ad.length;  
// generates a random digit
// then makes it a whole number

document.write('<a href="links[xy]+'" target="_blank">
<img src="/affiliates/'+pic[xy]+'" alt="'+img_title+'" width="'+img_width+'" height="'+img_height+'" /></a>');

After I posted this, I quickly learned that it was going to be a pain to get the code snippets in the blockquotes to display since it is JavaScript. The browser was reading it as a script, and not as text on the page.

So if the code isn’t showing up, let me know. WordPress doesn’t help much either since it automatically re-writes certain pieces of code in the post editor.

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!