diff --git a/jquery.rwdImageMaps.js b/jquery.rwdImageMaps.js index 93b3d0e..fd6713d 100644 --- a/jquery.rwdImageMaps.js +++ b/jquery.rwdImageMaps.js @@ -1,9 +1,9 @@ /* -* rwdImageMaps jQuery plugin v1.6 +* rwdImageMaps jQuery plugin v1.6 * * Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize * -* Copyright (c) 2016 Matt Stow +* Copyright (c) 2016 Matt Stow * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license @@ -11,44 +11,52 @@ ;(function($) { $.fn.rwdImageMaps = function() { var $img = this; - + var rwdImageMap = function() { $img.each(function() { if (typeof($(this).attr('usemap')) == 'undefined') return; - + var that = this, $that = $(that); - + // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy - $('').on('load', function() { - var attrW = 'width', - attrH = 'height', - w = $that.attr(attrW), - h = $that.attr(attrH); - - if (!w || !h) { - var temp = new Image(); - temp.src = $that.attr('src'); - if (!w) - w = temp.width; - if (!h) - h = temp.height; + $('').on('load', function() { + var w, h; + if ($that.data('w') && $that.data('h')) { + w = $that.data('w'); + h = $that.data('h'); + } else { + var attrW = 'width', + attrH = 'height'; + w = $that.attr(attrW); + h = $that.attr(attrH); + + if (!w || !h) { + var temp = new Image(); + temp.src = $that.attr('src'); + if (!w) + w = temp.width; + if (!h) + h = temp.height; + } + $that.data('w', w); + $that.data('h', h); } - + var wPercent = $that.width()/100, hPercent = $that.height()/100, map = $that.attr('usemap').replace('#', ''), c = 'coords'; - + $('map[name="' + map + '"]').find('area').each(function() { var $this = $(this); if (!$this.data(c)) $this.data(c, $this.attr(c)); - + var coords = $this.data(c).split(','), coordsPercent = new Array(coords.length); - + for (var i = 0; i < coordsPercent.length; ++i) { if (i % 2 === 0) coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent); @@ -61,7 +69,7 @@ }); }; $(window).resize(rwdImageMap).trigger('resize'); - + return this; }; -})(jQuery); +})(jQuery); diff --git a/jquery.rwdImageMaps.min.js b/jquery.rwdImageMaps.min.js index 61854cd..5b9e79f 100644 --- a/jquery.rwdImageMaps.min.js +++ b/jquery.rwdImageMaps.min.js @@ -1,11 +1,11 @@ /* -* rwdImageMaps jQuery plugin v1.6 +* rwdImageMaps jQuery plugin v1.6 * * Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize * -* Copyright (c) 2016 Matt Stow +* Copyright (c) 2016 Matt Stow * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license */ -;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("").on('load',function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h").on("load",function(){var r,i;if(a.data("w")&&a.data("h"))r=a.data("w"),i=a.data("h");else{if(r=a.attr("width"),i=a.attr("height"),!r||!i){var e=new Image;e.src=a.attr("src"),r||(r=e.width),i||(i=e.height)}a.data("w",r),a.data("h",i)}var n=a.width()/100,h=a.height()/100,s=a.attr("usemap").replace("#",""),d="coords";t('map[name="'+s+'"]').find("area").each(function(){var a=t(this);a.data(d)||a.data(d,a.attr(d));for(var e=a.data(d).split(","),s=new Array(e.length),c=0;c