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.
No comments:
Post a Comment