From ebf9585613efaf6525b33c7bc37ed7e254f828ac Mon Sep 17 00:00:00 2001 From: Andreas Behrend Date: Tue, 29 Sep 2015 15:53:20 +0200 Subject: [PATCH] Using naturalWidth & naturalHeight for further calculations --- README.md | 5 ++++- jquery.rwdImageMaps.js | 27 +++++++++++++++------------ jquery.rwdImageMaps.min.js | 5 ++++- 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 2bb033f..24a6eea 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,9 @@ --- +#### Bugfixes: +* Using naturalWidth & naturalHeight for further calculations + #### Usage: * If possible, add [correct, unitless](http://dev.w3.org/html5/markup/img.html) `width` and `height` attributes to your image map images. You can override these in CSS to make them responsive. @@ -30,4 +33,4 @@ http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html Copyright (c) 2012 [Matt Stow](http://mattstow.com) Licensed under the MIT license *(see [LICENSE](https://github.com/stowball/jQuery-rwdImageMaps/blob/master/LICENSE) for details)* -Minified version created with Online YUI Compressor: http://www.refresh-sf.com/yui/ \ No newline at end of file +Minified version created with Online YUI Compressor: http://www.refresh-sf.com/yui/ diff --git a/jquery.rwdImageMaps.js b/jquery.rwdImageMaps.js index c9d7348..f9cc9aa 100644 --- a/jquery.rwdImageMaps.js +++ b/jquery.rwdImageMaps.js @@ -7,26 +7,29 @@ * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license +* +* Fixed by Andreas Behrend: +* - responsive width and height */ ;(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 $('').load(function() { var attrW = 'width', attrH = 'height', - w = $that.attr(attrW), - h = $that.attr(attrH); - + w = $that.get(0).naturalWidth, + h = $that.get(0).naturalHeight; + if (!w || !h) { var temp = new Image(); temp.src = $that.attr('src'); @@ -35,20 +38,20 @@ if (!h) h = temp.height; } - + 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 +64,7 @@ }); }; $(window).resize(rwdImageMap).trigger('resize'); - + return this; }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/jquery.rwdImageMaps.min.js b/jquery.rwdImageMaps.min.js index 7ea76b1..311f0a3 100644 --- a/jquery.rwdImageMaps.min.js +++ b/jquery.rwdImageMaps.min.js @@ -7,5 +7,8 @@ * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license +* +* Fixed by Andreas Behrend: +* - responsive width and height */ -;(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("").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").load(function(){var g="width",m="height",n=d.get(0).naturalWidth,j=d.get(0).naturalHeight;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