diff --git a/jquery.maphilight.js b/jquery.maphilight.js index d1a5ea8..88ea516 100755 --- a/jquery.maphilight.js +++ b/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 = $("
" + canvas.innerHTML + "
"); $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'); }); }; diff --git a/jquery.maphilight.min.js b/jquery.maphilight.min.js index ec9d021..0890cd5 100644 --- a/jquery.maphilight.min.js +++ b/jquery.maphilight.min.js @@ -1 +1 @@ -(function(G){var B,J,C,K,N,M,I,E,H,A,L;J=!!document.createElement("canvas").getContext;B=(function(){var P=document.createElement("div");P.innerHTML='';var O=P.firstChild;O.style.behavior="url(#default#VML)";return O?typeof O.adj=="object":true})();if(!(J||B)){G.fn.maphilight=function(){return this};return }if(J){E=function(O){return Math.max(0,Math.min(parseInt(O,16),255))};H=function(O,P){return"rgba("+E(O.substr(0,2))+","+E(O.substr(2,2))+","+E(O.substr(4,2))+","+P+")"};C=function(O){var P=G('').get(0);P.getContext("2d").clearRect(0,0,P.width,P.height);return P};var F=function(Q,O,R,P,S){P=P||0;S=S||0;Q.beginPath();if(O=="rect"){Q.rect(R[0]+P,R[1]+S,R[2]-R[0],R[3]-R[1])}else{if(O=="poly"){Q.moveTo(R[0]+P,R[1]+S);for(i=2;i').get(0)};K=function(P,T,U,X,O){var V,W,R,S;for(var Q in U){U[Q]=parseInt(U[Q],10)}V='';W=(X.stroke?'strokeweight="'+X.strokeWidth+'" stroked="t" strokecolor="#'+X.strokeColor+'"':'stroked="f"');R='';if(T=="rect"){S=G('')}else{if(T=="poly"){S=G('')}else{if(T=="circ"){S=G('')}}}S.get(0).innerHTML=V+R;G(P).append(S)};N=function(P){var O=G("
"+P.innerHTML+"
");O.children("[name=highlighted]").remove();P.innerHTML=O.html()}}M=function(P){var O,Q=P.getAttribute("coords").split(",");for(O=0;O0)){return }if(U.hasClass("maphilighted")){var P=U.parent();U.insertBefore(P);P.remove();G(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}R=G("
").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(Y.wrapClass){if(Y.wrapClass===true){R.addClass(G(this).attr("class"))}else{R.addClass(Y.wrapClass)}}U.before(R).css("opacity",0).css(I).remove();if(B){U.css("filter","Alpha(opacity=0)")}R.append(U);T=C(this);G(T).css(I);T.height=this.height;T.width=this.width;X=function(c){var a,b;b=L(this,Y);if(!b.neverOn&&!b.alwaysOn){a=M(this);K(T,a[0],a[1],b,"highlighted");if(b.groupBy){var Z;if(/^[a-zA-Z][\-a-zA-Z]+$/.test(b.groupBy)){Z=Q.find("area["+b.groupBy+'="'+G(this).attr(b.groupBy)+'"]')}else{Z=Q.find(b.groupBy)}var d=this;Z.each(function(){if(this!=d){var f=L(this,Y);if(!f.neverOn&&!f.alwaysOn){var e=M(this);K(T,e[0],e[1],f,"highlighted")}}})}if(!J){G(T).append("")}}};G(Q).bind("alwaysOn.maphilight",function(){if(V){N(V)}if(!J){G(T).empty()}G(Q).find("area[coords]").each(function(){var Z,a;a=L(this,Y);if(a.alwaysOn){if(!V&&J){V=C(U[0]);G(V).css(I);V.width=U[0].width;V.height=U[0].height;U.before(V)}a.fade=a.alwaysOnFade;Z=M(this);if(J){K(V,Z[0],Z[1],a,"")}else{K(T,Z[0],Z[1],a,"")}}})});G(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){N(T)});U.before(T);U.addClass("maphilighted")})};G.fn.maphilight.defaults={fill:true,fillColor:"000000",fillOpacity:0.2,stroke:true,strokeColor:"ff0000",strokeOpacity:1,strokeWidth:1,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true,shadow:false,shadowX:0,shadowY:0,shadowRadius:6,shadowColor:"000000",shadowOpacity:0.8,shadowPosition:"outside",shadowFrom:false}})(jQuery); \ No newline at end of file +(function(G){var B,J,C,K,N,M,I,E,H,A,L;J=!!document.createElement("canvas").getContext;B=(function(){var P=document.createElement("div");P.innerHTML='';var O=P.firstChild;O.style.behavior="url(#default#VML)";return O?typeof O.adj=="object":true})();if(!(J||B)){G.fn.maphilight=function(){return this};return }if(J){E=function(O){return Math.max(0,Math.min(parseInt(O,16),255))};H=function(O,P){return"rgba("+E(O.substr(0,2))+","+E(O.substr(2,2))+","+E(O.substr(4,2))+","+P+")"};C=function(O){var P=G('').get(0);P.getContext("2d").clearRect(0,0,P.width,P.height);return P};var F=function(Q,O,R,P,S){P=P||0;S=S||0;Q.beginPath();if(O=="rect"){Q.rect(R[0]+P,R[1]+S,R[2]-R[0],R[3]-R[1])}else{if(O=="poly"){Q.moveTo(R[0]+P,R[1]+S);for(i=2;i').get(0)};K=function(P,T,U,X,O){var V,W,R,S;for(var Q in U){U[Q]=parseInt(U[Q],10)}V='';W=(X.stroke?'strokeweight="'+X.strokeWidth+'" stroked="t" strokecolor="#'+X.strokeColor+'"':'stroked="f"');R='';if(T=="rect"){S=G('')}else{if(T=="poly"){S=G('')}else{if(T=="circ"){S=G('')}}}S.get(0).innerHTML=V+R;G(P).append(S)};N=function(P){var O=G("
"+P.innerHTML+"
");O.children("[name=highlighted]").remove();P.innerHTML=O.html()}}M=function(P){var O,Q=P.getAttribute("coords").split(",");for(O=0;O0)){return }if(U.hasClass("maphilighted")){var P=U.parent();U.insertBefore(P);P.remove();G(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}R=G("
").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(Y.wrapClass){if(Y.wrapClass===true){R.addClass(G(this).attr("class"))}else{R.addClass(Y.wrapClass)}}U.before(R).css("opacity",0).css(I).remove();if(B){U.css("filter","Alpha(opacity=0)")}R.append(U);T=C(this);G(T).css(I);T.height=this.height;T.width=this.width;X=function(c){var a,b;b=L(this,Y);if(!b.neverOn&&!b.alwaysOn){a=M(this);K(T,a[0],a[1],b,"highlighted");if(b.groupBy){var Z;if(/^[a-zA-Z][\-a-zA-Z]+$/.test(b.groupBy)){Z=Q.find("area["+b.groupBy+'="'+G(this).attr(b.groupBy)+'"]')}else{Z=Q.find(b.groupBy)}var d=this;Z.each(function(){if(this!=d){var f=L(this,Y);if(!f.neverOn&&!f.alwaysOn){var e=M(this);K(T,e[0],e[1],f,"highlighted")}}})}if(!J){G(T).append("")}}};G(Q).bind("alwaysOn.maphilight",function(){if(V){N(V)}if(!J){G(T).empty()}G(Q).find("area[coords]").each(function(){var Z,a;a=L(this,Y);if(a.alwaysOn){if(!V&&J){V=C(U[0]);G(V).css(I);V.width=U[0].width;V.height=U[0].height;U.before(V)}a.fade=a.alwaysOnFade;Z=M(this);if(J){K(V,Z[0],Z[1],a,"")}else{K(T,Z[0],Z[1],a,"")}}})});G(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){N(T)}).bind("maphilightOn",X).bind("maphilightOff",function(Z){N(T)});U.before(T);U.addClass("maphilighted")})};G.fn.maphilight.defaults={fill:true,fillColor:"000000",fillOpacity:0.2,stroke:true,strokeColor:"ff0000",strokeOpacity:1,strokeWidth:1,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true,shadow:false,shadowX:0,shadowY:0,shadowRadius:6,shadowColor:"000000",shadowOpacity:0.8,shadowPosition:"outside",shadowFrom:false}})(jQuery);