Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fix the IE innerHTML thing more thoroughly.

Also, include the testing for image-loadedness inside the .maphilight() function.
  • Loading branch information...
commit f9b410d253913472e0c1508d9caf011d370ab5c6 1 parent 0449c28
@kemayo authored
View
4 docs/demo_simple.html
@@ -7,12 +7,13 @@
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script>$(function() {
- $('.map').load(function() { $(this).maphilight(); });
+ $('.map').maphilight();
});</script>
</head>
<body>
<h1>A small map</h1>
<p>This is just a simple example of how the maps look.</p>
+<p>
<img src="demo_simple.png" width="420" height="300" class="map" usemap="#simple">
<map name="simple">
<area href="#" shape="poly" coords="47,62, 106,61, 134,72, 135,118, 30,116" title="Default behavior"></area>
@@ -20,6 +21,7 @@
<area href="#" shape="circ" coords="290,102,30" class="{stroke:false,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="poly" coords="219,190, 225,175, 237,157, 239,148, 245,142, 251,140, 263,140, 265,139, 310,139, 311,145, 364,182, 363,201, 343,221, 333,213, 329,181, 313,177, 330,234, 295,231, 292,174, 279,176, 282,204, 269,220, 255,206, 267,167, 235,193" class="{stroke:false,fillColor:'000000',fillOpacity:1}" title="Metadata'd up a bit"></area>
</map>
+</p>
<a href="./">Back to the index</a>
</body>
</html>
View
2  docs/demo_usa.html
@@ -6,7 +6,7 @@
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script>$(function() {
- $('.map').load(function() { $(this).maphilight(); });
+ $('.map').maphilight();
});</script>
</head>
<body>
View
2  docs/demo_world.html
@@ -6,7 +6,7 @@
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script>$(function() {
- $('.map').load(function() { $(this).maphilight({fade: false}); });
+ $('.map').maphilight({fade: false});
});</script>
</head>
<body>
View
31 jquery.maphilight.js
@@ -1,6 +1,6 @@
(function($) {
var has_VML, create_canvas_for, add_shape_to, clear_canvas, shape_from_area,
- canvas_style, fader, hex_to_decimal, css3color;
+ canvas_style, fader, hex_to_decimal, css3color, is_image_loaded;
has_VML = document.namespaces;
has_canvas = document.createElement('canvas');
has_canvas = has_canvas && has_canvas.getContext;
@@ -67,20 +67,22 @@
return $('<var style="zoom:1;overflow:hidden;display:block;width:'+img.width+'px;height:'+img.height+'px;"></var>').get(0);
};
add_shape_to = function(canvas, shape, coords, options) {
- var fill, stroke, opacity;
+ var fill, stroke, opacity, e;
fill = '<v:fill color="#'+options.fillColor+'" opacity="'+(options.fill ? options.fillOpacity : 0)+'" />';
stroke = (options.stroke ? 'strokeweight="'+options.strokeWidth+'" stroked="t" strokecolor="#'+options.strokeColor+'"' : 'stroked="f"');
opacity = '<v:stroke opacity="'+options.strokeOpacity+'"/>';
if(shape == 'rect') {
- canvas.innerHTML = '<v:rect filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2] - coords[0])+'px;height:'+(coords[3] - coords[1])+'px;">'+fill+opacity+'</v:rect>';
+ e = $('<v:rect filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2] - coords[0])+'px;height:'+(coords[3] - coords[1])+'px;"></v:rect>');
} else if(shape == 'poly') {
- canvas.innerHTML = '<v:shape filled="t" '+stroke+' coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+coords[0]+','+coords[1]+' l '+coords.join(',')+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;">'+fill+opacity+'</v:shape>';
+ e = $('<v:shape filled="t" '+stroke+' coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+coords[0]+','+coords[1]+' l '+coords.join(',')+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"></v:shape>');
} else if(shape == 'circ') {
- canvas.innerHTML = '<v:oval filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(coords[0] - coords[2])+'px;top:'+(coords[1] - coords[2])+'px;width:'+(coords[2]*2)+'px;height:'+(coords[2]*2)+'px;">'+fill+opacity+'</v:oval>';
+ e = $('<v:oval filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(coords[0] - coords[2])+'px;top:'+(coords[1] - coords[2])+'px;width:'+(coords[2]*2)+'px;height:'+(coords[2]*2)+'px;"></v:oval>');
}
+ e.get(0).innerHTML = fill+opacity;
+ $(canvas).append(e);
};
clear_canvas = function(canvas) {
- canvas.innerHTML = '';
+ $(canvas).empty();
};
}
shape_from_area = function(area) {
@@ -89,24 +91,33 @@
return [area.getAttribute('shape').toLowerCase().substr(0,4), coords];
};
+ is_image_loaded = function(img) {
+ if(!img.complete) { return false; } // IE
+ if(typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { return false; } // Others
+ return true;
+ }
+
canvas_style = {
position: 'absolute',
left: 0,
top: 0,
- padding: 0
+ padding: 0,
+ border: 0
};
$.fn.maphilight = function(opts) {
opts = $.extend({}, $.fn.maphilight.defaults, opts);
return this.each(function() {
- var img, options, map, canvas, mouseover;
+ var img, wrap, options, map, canvas, mouseover;
img = $(this);
+ if(!is_image_loaded(this)) { return window.setTimeout(function() { img.maphilight(); }, 200); }
options = $.metadata ? $.extend({}, opts, img.metadata()) : opts;
map = $('map[name="'+img.attr('usemap').substr(1)+'"]');
if(!(img.is('img') && img.attr('usemap') && map.size() > 0 && !img.hasClass('maphilighted'))) { return; }
- img.wrap($('<span>').css({display:'block',background:'url('+this.src+')',position:'relative',padding:0,width:this.width,height:this.height}));
- img.css('opacity', 0).css('border', 0).css(canvas_style);
+ wrap = $('<div>').css({display:'block',background:'url('+this.src+')',position:'relative',padding:0,width:this.width,height:this.height});
+ img.before(wrap).css('opacity', 0).css(canvas_style).remove();
if($.browser.msie) { img.css('filter', 'Alpha(opacity=0)'); }
+ wrap.append(img);
canvas = create_canvas_for(this);
$(canvas).css(canvas_style);
View
2  jquery.maphilight.min.js
@@ -1 +1 @@
-(function(C){var A,B,H,I,J,G,E,D,F;A=document.namespaces;has_canvas=document.createElement("canvas");has_canvas=has_canvas&&has_canvas.getContext;if(!(has_canvas||A)){C.fn.maphilight=function(){return this};return }if(has_canvas){E=function(L,M,K){if(M<=1){L.style.opacity=M;window.setTimeout(E,10,L,M+0.1,10)}};D=function(K){return Math.max(0,Math.min(parseInt(K,16),255))};F=function(K,L){return"rgba("+D(K.substr(0,2))+","+D(K.substr(2,2))+","+D(K.substr(4,2))+","+L+")"};B=function(K){var L=C('<canvas style="width:'+K.width+"px;height:"+K.height+'px;"></canvas>').get(0);L.getContext("2d").clearRect(0,0,L.width,L.height);return L};H=function(P,L,K,O){var N,M=P.getContext("2d");M.beginPath();if(L=="rect"){M.rect(K[0],K[1],K[2]-K[0],K[3]-K[1])}else{if(L=="poly"){M.moveTo(K[0],K[1]);for(N=2;N<K.length;N+=2){M.lineTo(K[N],K[N+1])}}else{if(L=="circ"){M.arc(K[0],K[1],K[2],0,Math.PI*2,false)}}}M.closePath();if(O.fill){M.fillStyle=F(O.fillColor,O.fillOpacity);M.fill()}if(O.stroke){M.strokeStyle=F(O.strokeColor,O.strokeOpacity);M.lineWidth=O.strokeWidth;M.stroke()}if(O.fade){E(P,0)}};I=function(K,L){K.getContext("2d").clearRect(0,0,K.width,K.height)}}else{document.createStyleSheet().addRule("v\\:*","behavior: url(#default#VML); antialias: true;");document.namespaces.add("v","urn:schemas-microsoft-com:vml");B=function(K){return C('<var style="zoom:1;overflow:hidden;display:block;width:'+K.width+"px;height:"+K.height+'px;"></var>').get(0)};H=function(O,L,K,N){var P,Q,M;P='<v:fill color="#'+N.fillColor+'" opacity="'+(N.fill?N.fillOpacity:0)+'" />';Q=(N.stroke?'strokeweight="'+N.strokeWidth+'" stroked="t" strokecolor="#'+N.strokeColor+'"':'stroked="f"');M='<v:stroke opacity="'+N.strokeOpacity+'"/>';if(L=="rect"){O.innerHTML='<v:rect filled="t" '+Q+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+K[0]+"px;top:"+K[1]+"px;width:"+(K[2]-K[0])+"px;height:"+(K[3]-K[1])+'px;">'+P+M+"</v:rect>"}else{if(L=="poly"){O.innerHTML='<v:shape filled="t" '+Q+' coordorigin="0,0" coordsize="'+O.width+","+O.height+'" path="m '+K[0]+","+K[1]+" l "+K.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+O.width+"px;height:"+O.height+'px;">'+P+M+"</v:shape>"}else{if(L=="circ"){O.innerHTML='<v:oval filled="t" '+Q+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(K[0]-K[2])+"px;top:"+(K[1]-K[2])+"px;width:"+(K[2]*2)+"px;height:"+(K[2]*2)+'px;">'+P+M+"</v:oval>"}}}};I=function(K){K.innerHTML=""}}J=function(M){var L,K=M.getAttribute("coords").split(",");for(L=0;L<K.length;L++){K[L]=parseFloat(K[L])}return[M.getAttribute("shape").toLowerCase().substr(0,4),K]};G={position:"absolute",left:0,top:0,padding:0};C.fn.maphilight=function(K){K=C.extend({},C.fn.maphilight.defaults,K);return this.each(function(){var M,O,P,N,L;M=C(this);O=C.metadata?C.extend({},K,M.metadata()):K;P=C('map[name="'+M.attr("usemap").substr(1)+'"]');if(!(M.is("img")&&M.attr("usemap")&&P.size()>0&&!M.hasClass("maphilighted"))){return }M.wrap(C("<span>").css({display:"block",background:"url("+this.src+")",position:"relative",padding:0,width:this.width,height:this.height}));M.css("opacity",0).css("border",0).css(G);if(C.browser.msie){M.css("filter","Alpha(opacity=0)")}N=B(this);C(N).css(G);N.height=this.height;N.width=this.width;L=function(R){var Q=J(this);H(N,Q[0],Q[1],C.metadata?C.extend({},O,C(this).metadata()):O)};if(O.alwaysOn){C(P).find("area[coords]").each(L)}else{C(P).find("area[coords]").mouseover(L).mouseout(function(Q){I(N)})}M.before(N);M.addClass("maphilighted")})};C.fn.maphilight.defaults={fill:true,fillColor:"000000",fillOpacity:0.2,stroke:true,strokeColor:"ff0000",strokeOpacity:1,strokeWidth:1,fade:true,alwaysOn:false}})(jQuery);
+(function(C){var A,B,I,J,K,G,E,D,F,H;A=document.namespaces;has_canvas=document.createElement("canvas");has_canvas=has_canvas&&has_canvas.getContext;if(!(has_canvas||A)){C.fn.maphilight=function(){return this};return }if(has_canvas){E=function(M,N,L){if(N<=1){M.style.opacity=N;window.setTimeout(E,10,M,N+0.1,10)}};D=function(L){return Math.max(0,Math.min(parseInt(L,16),255))};F=function(L,M){return"rgba("+D(L.substr(0,2))+","+D(L.substr(2,2))+","+D(L.substr(4,2))+","+M+")"};B=function(L){var M=C('<canvas style="width:'+L.width+"px;height:"+L.height+'px;"></canvas>').get(0);M.getContext("2d").clearRect(0,0,M.width,M.height);return M};I=function(Q,M,L,P){var O,N=Q.getContext("2d");N.beginPath();if(M=="rect"){N.rect(L[0],L[1],L[2]-L[0],L[3]-L[1])}else{if(M=="poly"){N.moveTo(L[0],L[1]);for(O=2;O<L.length;O+=2){N.lineTo(L[O],L[O+1])}}else{if(M=="circ"){N.arc(L[0],L[1],L[2],0,Math.PI*2,false)}}}N.closePath();if(P.fill){N.fillStyle=F(P.fillColor,P.fillOpacity);N.fill()}if(P.stroke){N.strokeStyle=F(P.strokeColor,P.strokeOpacity);N.lineWidth=P.strokeWidth;N.stroke()}if(P.fade){E(Q,0)}};J=function(L,M){L.getContext("2d").clearRect(0,0,L.width,L.height)}}else{document.createStyleSheet().addRule("v\\:*","behavior: url(#default#VML); antialias: true;");document.namespaces.add("v","urn:schemas-microsoft-com:vml");B=function(L){return C('<var style="zoom:1;overflow:hidden;display:block;width:'+L.width+"px;height:"+L.height+'px;"></var>').get(0)};I=function(P,M,L,O){var R,S,N,Q;R='<v:fill color="#'+O.fillColor+'" opacity="'+(O.fill?O.fillOpacity:0)+'" />';S=(O.stroke?'strokeweight="'+O.strokeWidth+'" stroked="t" strokecolor="#'+O.strokeColor+'"':'stroked="f"');N='<v:stroke opacity="'+O.strokeOpacity+'"/>';if(M=="rect"){Q=C('<v:rect filled="t" '+S+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+L[0]+"px;top:"+L[1]+"px;width:"+(L[2]-L[0])+"px;height:"+(L[3]-L[1])+'px;"></v:rect>')}else{if(M=="poly"){Q=C('<v:shape filled="t" '+S+' coordorigin="0,0" coordsize="'+P.width+","+P.height+'" path="m '+L[0]+","+L[1]+" l "+L.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+P.width+"px;height:"+P.height+'px;"></v:shape>')}else{if(M=="circ"){Q=C('<v:oval filled="t" '+S+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(L[0]-L[2])+"px;top:"+(L[1]-L[2])+"px;width:"+(L[2]*2)+"px;height:"+(L[2]*2)+'px;"></v:oval>')}}}Q.get(0).innerHTML=R+N;C(P).append(Q)};J=function(L){C(L).empty()}}K=function(N){var M,L=N.getAttribute("coords").split(",");for(M=0;M<L.length;M++){L[M]=parseFloat(L[M])}return[N.getAttribute("shape").toLowerCase().substr(0,4),L]};H=function(L){if(!L.complete){return false}if(typeof L.naturalWidth!="undefined"&&L.naturalWidth==0){return false}return true};G={position:"absolute",left:0,top:0,padding:0,border:0};C.fn.maphilight=function(L){L=C.extend({},C.fn.maphilight.defaults,L);return this.each(function(){var N,Q,P,R,O,M;N=C(this);if(!H(this)){return window.setTimeout(function(){N.maphilight()},200)}P=C.metadata?C.extend({},L,N.metadata()):L;R=C('map[name="'+N.attr("usemap").substr(1)+'"]');if(!(N.is("img")&&N.attr("usemap")&&R.size()>0&&!N.hasClass("maphilighted"))){return }Q=C("<div>").css({display:"block",background:"url("+this.src+")",position:"relative",padding:0,width:this.width,height:this.height});N.before(Q).css("opacity",0).css(G).remove();if(C.browser.msie){N.css("filter","Alpha(opacity=0)")}Q.append(N);O=B(this);C(O).css(G);O.height=this.height;O.width=this.width;M=function(T){var S=K(this);I(O,S[0],S[1],C.metadata?C.extend({},P,C(this).metadata()):P)};if(P.alwaysOn){C(R).find("area[coords]").each(M)}else{C(R).find("area[coords]").mouseover(M).mouseout(function(S){J(O)})}N.before(O);N.addClass("maphilighted")})};C.fn.maphilight.defaults={fill:true,fillColor:"000000",fillOpacity:0.2,stroke:true,strokeColor:"ff0000",strokeOpacity:1,strokeWidth:1,fade:true,alwaysOn:false}})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.