Add custom events to maphlight.

jquery.maphilight.js

@@ -17,7 +17,7 @@
 		$.fn.maphilight = function() { return this; };
 		return;
 	}
-	
+
 	if(has_canvas) {
 		hex_to_decimal = function(hex) {
 			return Math.max(0, Math.min(parseInt(hex, 16), 255));
@@ -33,7 +33,7 @@
 		var draw_shape = function(context, shape, coords, x_shift, y_shift) {
 			x_shift = x_shift || 0;
 			y_shift = y_shift || 0;
-			
+
 			context.beginPath();
 			if(shape == 'rect') {
 				// x, y, width, height
@@ -51,9 +51,9 @@
 		}
 		add_shape_to = function(canvas, shape, coords, options, name) {
 			var i, context = canvas.getContext('2d');
-			
+
 			// Because I don't want to worry about setting things back to a base state
-			
+
 			// Shadow has to happen first, since it's on the bottom, and it does some clip /
 			// fill operations which would interfere with what comes next.
 			if(options.shadow) {
@@ -63,19 +63,19 @@
 					draw_shape(context, shape, coords);
 					context.clip();
 				}
-				
+
 				// Redraw the shape shifted off the canvas massively so we can cast a shadow
 				// onto the canvas without having to worry about the stroke or fill (which
 				// cannot have 0 opacity or width, since they're what cast the shadow).
 				var x_shift = canvas.width * 100;
 				var y_shift = canvas.height * 100;
 				draw_shape(context, shape, coords, x_shift, y_shift);
-				
+
 				context.shadowOffsetX = options.shadowX - x_shift;
 				context.shadowOffsetY = options.shadowY - y_shift;
 				context.shadowBlur = options.shadowRadius;
 				context.shadowColor = css3color(options.shadowColor, options.shadowOpacity);
-				
+
 				// Now, work out where to cast the shadow from! It looks better if it's cast
 				// from a fill when it's an outside shadow or a stroke when it's an interior
 				// shadow. Allow the user to override this if they need to.
@@ -95,7 +95,7 @@
 					context.fill();
 				}
 				context.restore();
-				
+
 				// and now we clean up
 				if(options.shadowPosition == "outside") {
 					context.save();
@@ -107,11 +107,11 @@
 					context.restore();
 				}
 			}
-			
+
 			context.save();
-			
+
 			draw_shape(context, shape, coords);
-			
+
 			// fill has to come after shadow, otherwise the shadow will be drawn over the fill,
 			// which mostly looks weird when the shadow has a high opacity
 			if(options.fill) {
@@ -125,9 +125,9 @@
 				context.lineWidth = options.strokeWidth;
 				context.stroke();
 			}
-			
+
 			context.restore();
-			
+
 			if(options.fade) {
 				$(canvas).css('opacity', 0).animate({opacity: 1}, 100);
 			}
@@ -156,13 +156,13 @@
 			$(canvas).append(e);
 		};
 		clear_canvas = function(canvas) {
-			// jquery1.8 + ie7 
+			// jquery1.8 + ie7
 			var $html = $("<div>" + canvas.innerHTML + "</div>");
 			$html.children('[name=highlighted]').remove();
 			canvas.innerHTML = $html.html();
 		};
 	}
-	
+
 	shape_from_area = function(area) {
 		var i, coords = area.getAttribute('coords').split(',');
 		for (i=0; i < coords.length; i++) { coords[i] = parseFloat(coords[i]); }
@@ -173,7 +173,7 @@
 		var $area = $(area);
 		return $.extend({}, options, $.metadata ? $area.metadata() : false, $area.data('maphilight'));
 	};
-	
+
 	is_image_loaded = function(img) {
 		if(!img.complete) { return false; } // IE
 		if(typeof img.naturalWidth != "undefined" && img.naturalWidth === 0) { return false; } // Others
@@ -187,11 +187,11 @@
 		padding: 0,
 		border: 0
 	};
-	
+
 	var ie_hax_done = false;
 	$.fn.maphilight = function(opts) {
 		opts = $.extend({}, $.fn.maphilight.defaults, opts);
-		
+
 		if(!has_canvas && !ie_hax_done) {
 			$(window).ready(function() {
 				document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
@@ -205,7 +205,7 @@
 			});
 			ie_hax_done = true;
 		}
-		
+
 		return this.each(function() {
 			var img, wrap, options, map, canvas, canvas_always, mouseover, highlighted_shape, usemap;
 			img = $(this);
@@ -260,12 +260,12 @@
 			img.before(wrap).css('opacity', 0).css(canvas_style).remove();
 			if(has_VML) { img.css('filter', 'Alpha(opacity=0)'); }
 			wrap.append(img);
-			
+
 			canvas = create_canvas_for(this);
 			$(canvas).css(canvas_style);
 			canvas.height = this.height;
 			canvas.width = this.width;
-			
+
 			mouseover = function(e) {
 				var shape, area_options;
 				area_options = options_from_area(this, options);
@@ -332,13 +332,15 @@
 					}
 				});
 			});
-			
+
 			$(map).trigger('alwaysOn.maphilight').find('area[coords]')
 				.bind('mouseover.maphilight', mouseover)
-				.bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });
-
+				.bind('mouseout.maphilight', function(e) { clear_canvas(canvas); })
+				.bind('maphilightOn', mouseover)
+        .bind('maphilightOff', function(e) { clear_canvas(canvas); });
+
 			img.before(canvas); // if we put this after, the mouseover events wouldn't fire.
-			
+
 			img.addClass('maphilighted');
 		});
 	};