Role-based Random Rotating Banner!

Do you ever need a banner rotator which is random? What if you could target your viewers by their roles? Well here you go, a random role based rotating banner javascript.

The HTML which will contain the rotating banners:

<a href="banlink" id="adLink" target="_top">
<img src="banImg" id="adBanner" border="0" width="610" height="100" alt="banAlt"></a>

The first javascript section sets the defaults for the role and rotating rate. It also pulls the user's role from a queryString. This can be modified to use server side code to identify the user's role. I have done this with java code like:
var role=<%= user.getRole() >. You could also use .Net's Principal object to fill this in.

<script type="text/javascript">
        // code by JJohn
        // random role based rotating banner 
 var role = "NONMEMBER"; // default
 var rollrate = 10; // seconds to show before rotating

 // THIS PART alows you to
 // get user role from query string
 // START
 role = querySt("role");
 if(role == null){
  role = "NONMEMBER";
 }
 
 rollrate= querySt("rollrate");
 if(rollrate == null){
  rollrate = 15;
 } 
 function querySt(ji) {//parse out name : value from querystring
 hu = window.location.search.substring(1);
 gy = hu.split("&");
 for (i=0;i<gy.length;i++) {
  ft = gy[i].split("=");
  if (ft[0] == ji) {
   return ft[1];
  }
 }
 // END
}

</script>

The second javascript section defines the banner's location, link and the role which can view the banner. It also contains the random rotating logic.

<script type="text/javascript">
// define images
var bannerImages = new Array(
 "images/Banner1.gif",
 "images/Banner2.gif",
 "images/Banner3.gif",
 "images/Banner4.gif",
 "images/Banner5.gif",
 "images/Banner6.gif",
 "images/Banner7.gif",
 "images/Banner8.gif",
 "images/Banner9.gif",
 "images/Banner10.gif");

// define banner links
var bannerLinks = new Array(
 "",
 "",
 "",
 "",
 "",
 "",
 "",
 "",
 "",
 "");

// define banner alt texts
// this is where you would define the user roles
var bannerTexts = new Array(
 "Banner1 NONMEMBER",
 "Banner2 NONMEMBER",
 "Banner3 NONMEMBER",
 "Banner4 NONMEMBER",
 "Banner5 NONMEMBER",
 "Banner6 NONMEMBER",
 "Banner7 MEMBER",
 "Banner8 MEMBER",
 "Banner9 MEMBER ADMIN",
 "Banner10 MEMBER");

 var oldIndex = 99; // init 



function getBanner() {
 var index = 0; 
 try{
 do {// get random index
  index  = Math.floor((bannerImages.length)*Math.random()); // get random 
 }while(bannerTexts[index].indexOf(role)<0 && index != oldIndex && index <= bannerImages.length); // banner is not in role get another one and banner is new
 
 oldIndex = index; // set old value

 var banner = document.getElementById('adBanner');
 var link   = document.getElementById('adLink');
 document.getElementById('adBanner').src = bannerImages[index];
 document.getElementById('adBanner').alt = bannerTexts[index];
 link.href  = bannerLinks[index];
 document.getElementById('adText').value=bannerTexts[index];
 }catch(err){
  //alert(index);
 }
}
getBanner();
window.setInterval("getBanner()",rollrate*1000); //get next banner, rollrate is in seconds

</script>

Have fun!