A JavaScript Banner Rotator

**Spiral** · #1 (**permalink**) 07-15-2007, 05:19 PM

First things first - you need to have a few banners to link together, so I suggest you go and make those banners as soon as possible. You will find life much easier if you make them all the same size however, since there are different methods of going about this depending on which browser the page is intended for. The example given below should work well for most browsers (providing that you have JavaScript enabled) - perhaps with the exception of the earlier versions... but if you are still using them now I would strongly recommend that you need to update!
There are three main sections that make this script work, the script snippet holding the functions, the snippet that initialises the banner and the HTML file used to display the banner in the later versions of Internet Explorer.
First of all, the function code, just below, should be placed in the header file of all the pages that you wish to use the script on. If you want a different size image, then be sure to set your image and width attributes to something that is appropriate for your use. I did try to link this code into my pages using the link tag, but it prevented it from working so I would not recommend that you put this code in an external script file. If you want to change the speed of the rotation, then you should change the values in the setTimeout lines, I have it set to 60 seconds.

HTML Code:

<script TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function Href(dest,image,text) {
  this.dest = dest; this.image = image; this.text = text; }

function setHref(dest,image,text) {
  myHref"hrefItems++" = new Href(dest,image,text); }

function replace() {
  var now = new Date();
  random = now.getSeconds()%hrefItems;
  if (random == lastrandom) {
    if (random == hrefItems-1) random--; else random++; }
  document "'banner'".src = myHref"random".image;
  document.links"0".href = myHref"random".dest;
  setTimeout('replace()',60000);
  lastrandom = random; }

function Test() {
  if (navigator.appName == "Netscape") {
    var now = new Date();
    random = now.getSeconds()%hrefItems; lastrandom = random;
    document.write('<A HREF="' + myHref"random".dest + '">');
    document.write('<IMG NAME="banner" WIDTH=468 HEIGHT=60 ');
    document.write('BORDER=0 ALT="Caption for image here" ');
    document.write('SRC="' + myHref"random".image + '">');}
  if (navigator.appName == "Netscape"
      && parseInt(navigator.appVersion) >= 3) {
    setTimeout('replace()',60000);}}
//-->
Then, you add this little snippet of code for each banner you want to create on your page. Make sure to change the details of each banner to suit the sites that you wish to link to (you can add more so long as you stick to the example format).
<script TYPE="text/javascript" LANGUAGE="JavaScript"><!--
var random = 0;
var lastrandom = -1;
var hrefItems = 0;
var myHref = new Array();
setHref('http://www.site1.com','banner1.gif','Site 1');
setHref('http://www.site2.com','banner2.gif','Site 2');
setHref('http://www.site3.com','banner3.gif','Site 3');
Test();
//--></script>
<noscript>Please enable JavaScript if you wish to see this image and link.</noscript>
<iframe FRAMEBORDER="0" WIDTH="468" HEIGHT="60" MARGINHEIGHT="0" 
MARGINWIDTH="0" SCROLLING="no" SRC="banner.html"></iframe>

After putting the code in your page - you need to create a new page for the floating frame that the later versions of Internet Explorer will use. The page used in the code above is called banner.html - but of course you can change this reference to suit your needs. Please feel free to view and download the source code for the banner.html page, to download it, right click on the link and then select the "save target as" option - or open up the page (link opens in a new window) and then choose save in the file menu of your browser.
If you have changed the image size or the timer value in the script, make sure to change the corresponding values in the HTML file also, otherwise you will end up with a banner that changes shape and rotation speed depending which browser was used

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode


<<< The Web Hosting >>>