function over(what) {
  // current src will be something like "images/nav/XXXXXXXX.jpg"
  
  var cursrc = what.src;
  var ext = cursrc.substring(cursrc.length - 3);
  cursrc = cursrc.substring(0, cursrc.length - 4);
  
  what.src = cursrc + '-over.' + ext;
}

function out(what) {
  // current src will be something like "images/nav/XXXXXXXX-over.jpg"
  
  var cursrc = what.src;
  
  // if you're already over an image as the page loads, IE doesn't call
  //  mouseover, so this tried to remove _over from a src that doesn't
  //  have _over in it yet. So let's just bail if there's no -over
  if (cursrc.substr(cursrc.length - 9, 5) != "-over") return;
  
  var ext = cursrc.substring(cursrc.length - 3);
  cursrc = cursrc.substring(0, cursrc.length - 9);
  
  what.src = cursrc + '.' + ext;
}

Event.observe(window, "load", function() {
  $$('.hoverable').each(function(item) {
    // only do it if it's an image!
    if (item.tagName.toLowerCase() == "img") {
      item.up().up().observe('mouseover', function() { over(item); });
      item.up().up().observe('mouseout',  function() { out(item); });
    }
  });
});