hover over transparent parts of png

1 files changed, 120 insertions, 0 deletions

diff --git a/public/javascripts/hoverpng.js b/public/javascripts/hoverpng.js
new file mode 100644
index 0000000..de7cdd5
--- /dev/null
+++ b/public/javascripts/hoverpng.js
@@ -0,0 +1,120 @@
+/*
+ * Hover PNG by OKFocus - http://okfoc.us - @okfocus
+ * Version 1.0
+ * Licensed under MIT.
+ *
+ */
+
+(function($){
+
+  $.hoverpng = function(el, options){
+    var base = this;       
+    base.$el = $(el);
+    base.el = el;        
+    base.$el.data("hoverpng", base);
+    
+    var active = true, hovering = false;
+    var canvas, imageData = null;
+
+    base.init = function(){            
+      base.options = $.extend({}, $.hoverpng.options, options);
+      base.options.threshold = Math.floor( base.options.threshold *= 254 );
+      base.build();
+    };
+    
+    base.build = function(){
+    	$(window).bind({
+				'blur': function(){ hovering = false; }
+    	});
+      base.$el.bind({
+        'load': base.fetch,
+        'mouseover': base.mouseover,
+        'mouseout': base.mouseout,
+        'mousemove': base.mousemove
+      });
+      if (base.el.complete) {
+        base.fetch();
+      }
+    };
+
+    base.fetch = function(){
+      canvas = document.createElement("canvas");
+      canvas.width = base.el.naturalWidth;
+      canvas.height = base.el.naturalHeight;
+      var ctx = canvas.getContext('2d');
+      ctx.drawImage(base.el, 0, 0);
+      imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height ).data;
+    }
+    
+    base.clamp = function (x, min, max) {
+      return Math.max(min, Math.min(max, x));
+    };
+
+    base.mouseover = function(e) {
+      if ( base.detect(e) ) {
+        hovering = true;
+        base.options.mouseover(e);
+      }
+    }
+    base.mouseout = function(e) {
+      if ( hovering ) {
+        base.options.mouseout(e);
+      }
+      hovering = false;
+    }
+    base.mousemove = function(e) {
+      if ( base.detect(e) ) {
+        if ( hovering ) {
+xxx = e;
+          base.options.mousemove(e);
+        }
+        else {
+          base.options.mouseover(e);
+        }
+        hovering = true;
+      }
+      else if ( hovering ) {
+        base.options.mouseout(e);
+        hovering = false;
+      }
+    }
+    base.detect = function (e){
+      if (! imageData) {
+        return false;
+      }
+      var offset = base.$el.offset();
+      var x = e.pageX - offset.left;
+      var y = e.pageY - offset.top;
+      var pixelOffset = (canvas.width * y + x) * 4;
+      var alpha = imageData[ pixelOffset + 3 ];
+      e.rgba = [
+        imageData[(canvas.width * y + x) * 4 ],
+        imageData[(canvas.width * y + x) * 4 + 1 ],
+        imageData[(canvas.width * y + x) * 4 + 2 ],
+        imageData[(canvas.width * y + x) * 4 + 3 ]
+      ];
+      e.alpha = alpha;
+      return alpha > base.options.threshold;
+    }
+
+    base.init();
+  };
+
+  $.hoverpng.options = { 
+    mouseover: function(){},
+    mousemove: function(){},
+    mouseout: function(){},
+    threshold: 0
+  };
+  
+  $.fn.hoverpng = function(options){
+    return this.each(function(){
+      (new $.hoverpng(this, options));            
+    });
+  };
+  
+  function detectMobile () {
+    return navigator.userAgent.indexOf("Mobile") !== -1 || navigator.userAgent.indexOf("Android") !== -1;
+  }
+})(jQuery);
+