Step1: Opening the Javascript tags and setting the variables/size of the images you are going to display:
| <SCRIPT language=JavaScript>
var img_width = "468"; var img_height = "60"; var img_title = "Click Here"; |
The width and heights are recognised as pixels, I have set the default size of most of the banners. Tou 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 create an array to store the site link and banner image. We create separate array for each
| var links=new Array()
var pic=new Array() |
We need to set up the variable for the new array;
The 0 indicates the position of the array
| pic[0]='http://xtratutorials.uni.cc/images/footer.jpg'; |
To create more links and images increment each position by 1
//insert here your links
| links[0]='http://www.xtratutorials.uni.cc'; |
The position 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);//generates a random //digit and then makes it a whole number
document.write('<a href="/img_articles/14571/'+links[xy]+'" target="_blank"><img src="/img_articles/14571/'+pic[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> |
So heres a breakdown on the final code:
| <SCRIPT language=JavaScript>
var img_width = "468"; var img_height = "60"; var img_title = "Click Here"; var links=new Array() var pic=new Array() //insert here your images src pic[0]='http://xtratutorials.uni.cc/images/footer.jpg'; //insert here your links links[0]='http://www.xtratutorials.uni.cc'; var xy=Math.floor(Math.random()*ad.length);//generates a random //digit and then makes it a whole number document.write('<a href="/img_articles/14571/'+links[xy]+'" target="_blank"><img src="/img_articles/14571/'+pic[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_title+'"></a>'); </SCRIPT> |
More Web Programming: 
