mouseable.js

/**
 * Author: Colin Mollenhour
 * Description: Wraps Raphael primitives with a set consisting of a primitive and an invisible
 * clone used for handling mouse events.
 * Access the overlay element and reset its opacity with: overlay()
 * Access the set within overlay event handlers with: this.set
 */
Raphael.fn.mouseable = function(){
  var args = Array.prototype.slice.call(arguments);
  var type = args.shift();
  var set = this.set([this[type].apply(this,args)]);
  set.push(set.items[0].clone().attr({"opacity":0.0}));
  set.items[1].set = set;
  set.overlay = function(){
    return this.items[1].attr({"opacity":0.0});
  };
  return set;
};

///////////////////
// Example Usage //
///////////////////

  // Render Background
  var rect = paper.mouseable('rect', x,y,w,h,r)
    .attr({
      fill:'red',
      opacity:0.8
    });

  // Render Text
  var padding = r / 3;
  var text = paper.text(x + padding + (w/2), y + padding + 5, text)
    .attr({
      "font-size":"10px"
    });

  // Mouse Handler Overlay
  rect.overlay().toFront()
    .attr({
      cursor:'pointer'
    })
    .mouseover(function(){
      this.set.scale(2).attr({opacity:1.0}).overlay();
      text.attr({"font-size":"20px"});
    })
    .mouseout(function(){
      this.set.scale(1).attr({opacity:0.8}).overlay();
      text.attr({"font-size":"10px"});
    });