// JavaScript Document

window.onload = rolloverInit;

var overimages = [];
function rolloverInit() 
{
    var nav = document.getElementById("navigation");
    var navimages = nav.getElementsByTagName("img");
    for ( var i = 0; i < navimages.length; i++) 
    {
        var image = navimages[i];
        // preload the over images for performance
        overimages[i] = new Image();
        overimages[i].src = image.src.replace(/\.jpg/, "_ro.jpg"); 

        // but then don't care about the preloads after that
        image.onmouseout = function() { this.src=this.src.replace(/_ro\.jpg/, ".jpg"); }
        image.onmouseover = function() { this.src=this.src.replace(/\.jpg/, "_ro.jpg"); }
    }
}