80x15 buttonized slide show

I wanted to include some "I support" and "I use" buttons on this site. You know, the 80x15 pixels kind of button, advertising anything from the license information, W3C validation to what kind of music you listen to. As I wanted to include several of them but avoid plastering them all over the place, implementing them in a simple slide show seemed to be a good idea.

I really just wanted a simple image switcher, which allowed links, wouldn't mess up my code and went of at a timer. Didn't think it would take long to find a usable script online, but nothing to match my requirements turned up. Ok, sounds like a perfect opportunity to expand my knowledge about JavaScript and the inner workings of DOM had turned up...

I thought I'd only spend a couple of minutes on this, but ended up with fiddling with it for a couple of hours and with a script which was bit more complex than I first had in mind. It even implements IE specific transitions if available and pauses on mouseover, two things I hadn't even considered when I started.

Image paths, titles and uri's are stored in arrays defined at the start of the function (HappySrc, HappyCap and HappyUrl), the only thing you need to get this working is to customize these to suit your needs. Lastly, the function call in the onload event defines the trigger interval. 8500 as used in the example, refers to milliseconds, this gives an interval of about eight and a half second.

The drawback of the script is that nearly everything is defined within the function. So if you plan on using this and have more than one slide show on the site, it would make sense to move the definitions out of the function and pass them back as variables. This would make the function reusable, and as such a more sensible solution...

HTML markup
<div id="browsehappy">
<p>
<a href="link" title="title"><img src="src" alt="alt"></a>
</p>
</div>
CSS definintions
#browsehappy p {
 text-align: center;
 }
#browsehappy img {
 border: 0px;
 }
/* For IE only transition filter */
* html #browsehappy {
 width: 175px;
 height: 15px;
 margin: 20px 0px 0px 0px;
 filter:revealTrans(transition=23,duration=2);
 }
JavaScript source
// Global variables
var HappyCnt=0,HappyMouseOver=false;
 
// Window onload event
window.onload = function() {
  eBrowseHappy(8500);
  };
 
// Browse(r) Happy buttons SlideShow
function eBrowseHappy(intTimer) {
 if (!document.getElementById && document.createElement) return false;
 if (!HappyMouseOver){
  var HappySrc = new Array("browsehappy.png","opera.png","firefox.png");
  var HappyCap = new Array("Browse Happy! - Online. Worry free.","fast, secure, simple, Opera!","FireFox");
  var HappyUrl = new Array("http://www.browsehappy.com/","http://www.opera.com/","http://www.getfirefox.com");
 
  var objDoc = document;
  var objElm = objDoc.getElementById("browsehappy");
  var objImg = objElm.getElementsByTagName("img");
  var objLink = objElm.getElementsByTagName("a");
 
  if (document.all && objImg[0].filters){
   // IE specific transition
   objElm.filters.revealTrans.Transition=23;
   objElm.filters[0].Apply();
   objElm.innerHTML = '<p>'
     + '<a rel="external"'
     + ' href="' + HappyUrl[HappyCnt] + '"'
     + ' title="' + HappyCap[HappyCnt] + '"'
     + '>'
     + '<img'
     + ' src="' + HappySrc[HappyCnt] + '"'
     + ' alt="' + HappyCap[HappyCnt] + '"'
     + ' onmouseover = "HappyMouseOver=true;"'
     + ' onmouseout = "HappyMouseOver=false;"'
     + '>'
     + '</a>'
     + '</p>'
     ;
   objElm.filters[0].Play();
   }
  else {
   // Swap image
   objImg[0].onmouseover = "HappyMouseOver=true;"
   objImg[0].onmouseout = "HappyMouseOver=false;"
   objLink[0].href = HappyUrl[HappyCnt];
 
   objImg[0].src = HappySrc[HappyCnt];
   objImg[0].alt = HappyCap[HappyCnt];
   objLink[0].title = objImg[0].alt;
   }
 
  if (HappyCnt+1 == HappySrc.length) {
   HappyCnt=0;
   }
  else {
   HappyCnt = HappyCnt+1;
   }
  };
 // Create a new timeout
 eBrowserHappyTimer = setTimeout("eBrowserHappyTimer=null;eBrowseHappy(" + intTimer + ");",intTimer);
 };

I've prepared a document that demonstrates the above. To make stealing it easy, I've included all the necessary code inline. This work is licensed under a Creative Commons License. As always, comments and corrections are very much welcomed!

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.016 seconds...

Errors occurred while generating this page... (More info availible)