Nothing catches the eye like a rotating features section on a website’s home page.  This can easily be accomplished with Javascript, and we will show you how.

First, you will need to create your site layout, banner sized, and CSS code.  Once you have this foundation laid out, you can add your Javascript code.  Our Features section will consist of 6 rotating images, with corresponding text and links (You can view a working example at the University of Missouri website ).   Create a new .js file to store your code; we called ours bannerRotator.js, but any name will suffice.

We will create Javascript arrays to store our image/features information:
[js]var adImages = new Array();
  // Enter the names of the images below
  // REMEMBER TO CHANGE THE CODE ON INDEX.SHTML TO REFLECT IMAGE 0 HERE
  adImages[0]="<a href="/images/features/090424_summit.jpg">/images/features/090424_summit.jpg</a>";
  adImages[1]="<a href="/images/features/090424_sustain.jpg">/images/features/090424_sustain.jpg</a>";
  adImages[2]="<a href="/images/features/090406_mob.jpg">/images/features/090406_mob.jpg</a>";
  adImages[3]="<a href="/images/features/090414_rocket.jpg">/images/features/090414_rocket.jpg</a>";
  adImages[4]="<a href="/images/features/090416_power.jpg">/images/features/090416_power.jpg</a>";
  adImages[5]="<a href="/images/features/090424_nerds.jpg">/images/features/090424_nerds.jpg</a>";
  adImages[6]="<a href="http://www.umsystem.edu/images/features/090402_dream.jpg">http://www.umsystem.edu/images/features/090402_dream.jpg</a>";
 
var adBackground = new Array();
//Enter the corresponding background colors
  adBackground[0]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
  adBackground[1]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
  adBackground[2]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
  adBackground[3]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
  adBackground[4]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
  adBackground[5]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
  adBackground[6]="url(/images/highlightsarrow.gif) no-repeat transparent left center";
 
var adText = new Array();
//Enter the descriptive title
   adText[0] = "Energy summit";
   adText[1] = "Sustain Mizzou";
   adText[2] = "Mobster research";
   adText[3] = "Rocket launch";
   adText[4] = "Biomass power";
   adText[5] = "Nerd campaign";
   adText[6] = "Dream jobs";
var adLink = new Array();
//Enter the URL to the full story
   adLink[0] = "/story/1.html";
   adLink[1] = "/story/2.html";
   adLink[2] = "/story/3.html";
   adLink[3] = "/story/4.html";
   adLink[4] = "/story/5.html";
   adLink[5] = "/story/6.html";
   adLink[6] = "/story/7.html";[/js]
Next, we will create a function to rotate the images:
[js]function rotate() {
   if(document.images) {
 

        if (thisAd == imgCt) {
            thisAd = 0
       }

       document.adBanner.src=adImages[thisAd];

       featureTitle(thisAd)
       thisAd++
 
      setTimeout("rotate()", 9 * 1000)

  }
}[/js]
Next, a function to store all of the generated HTML in an array (and push to the adText element, via innerHTML):
[js]function featureTitle(thisAd)  {

   var totalArray = "&lt;br /&gt;";
   var newValue = "";
   var newHref = "";

   for (i=0;i&lt;adText.length;i++)
   {
  
      if (i == thisAd)
      {
     
         newValue = "&lt;strong&gt;&lt;a style=\"color: #fff;_margin-left:-15px;background: " + adBackground[i] + ";\" href=\"" + adLink[i] + "\"&gt;" + adText[i] + "&lt;/a&gt;&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;&lt;script language=\"javascript\" type=\"text/javascript\"&gt;document.getElementById(’newBg’).href=adLink[" + i + "];&lt;/script&gt;";
     
      } else {     
     
         newValue = "&lt;a onMouseOver=\"document.adBanner.src=adImages[" + i + "]; document.getElementById(’newBg’).href=adLink[" + i + "]; featureTitle(" + i + ");\" href=\"#\"&gt;" + adText[i] + "&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;";
          
      }

     
      totalArray = totalArray + newValue;
   }

   newVar = totalArray;
   document.getElementById(’adText’).innerHTML = newVar;
  
}[/js]
Finally, a function to load the features:
[js]function loadStory(i) {

 document.adBanner.src=adImages[i];

}[/js]
Add the following code to the .js file:
[js]thisAd = 0;

imgCt = adImages.length[/js]
The thisAD variable resets the variable counter, and imgCT determined the length of the adImages image.

In the <HEAD> tag of your web page with the features section, make sure that you reference your .JS file.   Our file is in the scripts directory, and is entitled bannerRotator.js:
[js]&lt;script type="text/javascript" src="/scripts/bannerRotator.js"&gt;&lt;/script&gt;[/js]
Finally, add the javascript code required to activate the rotate function:
[js]&lt;script type="text/javascript"&gt;
 $(document).ready(function(){
    rotate();
  });
&lt;/script&gt;
[/js]
All of the code is in place.  All that is required is a bit of tweaking on your part in order to ensure that the images and text line up.

Javascript