OK so most of you own a website correct? are you sick and tired of constantly having to re upload images, or change all of your pages advertisements. Well here is your solution, a javascript banner rotator which allows you to rotate as many banners as you wish.

Step1: Opening the Javascript tags and setting the variables/size of the images you are going to display:

<SCRIPT language=JavaScript>

var img_width = "728";
var img_height = "90";
var img_title = "Click Here";

The width and heights are recognised as pixels, you can change these to what you wish, the img_title is what will be displayed to a user that highlights there mouse over the banner, exactly the same as title and alt tags basically.

Step2: We now need to create a new array for the images that the script will scroll, the array tag is shown below:

var ad=new Array()

We need to set up the variable for the new array;

ad[0]='http://www.arcadescript.com/banners/arcadescript728x90.gif';

You can number your ad/name your ad to what you wish, but i have used 0 for this tutorial.

This step is the most important, we need to create another line of code which will query request the information from the image array, this will then know how to preview your banner and want information to preview it with;

var links=new Array()
//insert here your links
links[0]='http://www.nowtutorials.com/click.php?id=14';

The ID of each link has to match all the time with the image ID, for example [0] and [0], not [0] and [1].

The last part of the script is the code that displays the information for the banner;

var xy=Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[xy]+'" target="_blank"><img src="'+ad[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_title+'"></a>');

This basically gathers the information of the image and implements it/echos it onto your web page, every refresh on your page and it will rotate/change the banner if you have more than one banner active in the script.

The last bit of code is to close the Javascript/Script function, the simple code below;

</SCRIPT>

Now we need to implement the script in to your page, On nowtutorials i have inputted the code into dreamweaver and saved it as a php file (adds.php) I have then included it into the footer of every page.

<?php include "adds.php" ;?>

You can easily just cut and paste it in the section of your website where you want the advertisements to be.

So heres a breakdown on the final code:

<SCRIPT language=JavaScript>

var img_width = "728";
var img_height = "90";
var img_title = "Click Here";

var ad=new Array()

//insert here your images src
ad[0]='http://www.arcadescript.com/banners/arcadescript728x90.gif';

var links=new Array()
//insert here your links
links[0]='http://www.nowtutorials.com/click.php?id=14';

var xy=Math.floor(Math.random()*ad.length);document.write('<a href="'+links[xy]+'" target="_blank"><img src="'+ad[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_title+'"></a>');
</SCRIPT>

You can see a live preview of this script if you scroll down to the footer of this page, refresh the page and watch the banners change.

If you have any problems or need help regarding this tutorial please navigate to the contact us page and drop me a message, i will gladly email you back asap.

I hope this tutorial was helpfull, and please do keep checking back as there will be more tutorials like this shortly.