randomhover.js

I thought, wouldn't it be a great idea to have the background of a link change to a different color every time you over hover it? That'd look sweet.

// NOTE: Load prototype.js first (prototypejs.org)
// NOTE: Load the HTML first, otherwise we don't know what we're dealing with

// function to set random background colors
var sidebarLinks = function(e) {
  var bg = "transparent"; // default background

  if (e.type == "mouseover" || e.type == "focus") {
    var colors = new Array("#ff6", "#6cf", "#f9f"); // list of colors we like
    
    // get random number and use % to make sure i doesn't go out of bounds
    var i = Math.floor(Math.random() * colors.length) % colors.length;
  
    bg = colors[Math.floor(Math.random() * colors.length)];
  }

  // get the link that triggered the event
  var element = Event.element(e);

  // set the background on that link
  element.style["background"] = bg;
}

var sidebars = $$("#sidebar a"); // all the links in the sidebar

for (var i = 0; i < sidebars.length; ++i) {
  // call "sidebarLinks" whenever I mouseover or mouseout a link
  Event.observe(sidebars[i], "mouseover", sidebarLinks);
  Event.observe(sidebars[i], "mouseout", sidebarLinks);

  // these are the keyboard-specific events for accessibility reasons
  Event.observe(sidebars[i], "focus", sidebarLinks);
  Event.observe(sidebars[i], "blur", sidebarLinks);
}

This code can actually be a lot shorter if you inline a few things. But I expanded it out to help the reading process and because my syntax highlighter has a few parsing bugs. Grr.