Clickable blocks for link target

clickables.js

/************************************
 * Clickables (big block targets)
 ***********************************/
var Clickables = Class.create({

  initialize: function(options) {
    selector = $$(options.selector) || $$(".clickables");

    this.clickable = options.clickable || "li";
    this.hoverclass = options.hoverclass || "over";

    selector.each(function(e) { $(e).setStyle({ cursor: 'pointer' }) });

    selector.invoke('observe', 'click', this.clicked.bind(this));
    selector.invoke('observe', 'mouseover', this.activate.bind(this));
    selector.invoke('observe', 'mouseout', this.deactivate.bind(this));
  },

  activate: function(event) {
    event.stop();
    element = Event.findElement(event, this.clickable);
    element.addClassName(this.hoverclass);
  },

  deactivate: function(event) {
    event.stop();
    element = Event.findElement(event, this.clickable);
    element.removeClassName(this.hoverclass);
  },

  clicked: function(event) {
    event.stop();
    element = Event.findElement(event, this.clickable);
    window.location = element.select("a").first().href;
  }
});