From ad30d62c74b670026678e6391b174f507a32df3a Mon Sep 17 00:00:00 2001 From: Matt Stow Date: Thu, 18 Jul 2013 09:56:03 +1000 Subject: [PATCH 1/6] Added better instructions and MIT license --- LICENSE | 20 ++++++++++++++++++++ README.md | 31 +++++++++++++++++++++++-------- 2 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..ff6c856 --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2013 Izilla Partners Pty Ltd + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index 6a7a8fd..49ad8a9 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,31 @@ -jQuery RWD Image Maps -============================== +# jQuery RWD Image Maps ### 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 -* * * +--- -Usage: +**Usage:** -$('img[usemap]').rwdImageMaps(); +* Add a link to jQuery in your page, preferably at the bottom just before the closing `` +* After jQuery, either in a `` block or a separate file, call: -* * * +`$('img[usemap]').rwdImageMaps();` -Demo: +You may also want to wrap it inside a `$(document).ready()` function, like so: -http://www.mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html \ No newline at end of file +``` +$(document).ready(function(e) { + $('img[usemap]').rwdImageMaps(); +}); +``` + +--- + +**Demo:** + +http://www.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)* \ No newline at end of file From 476a20659a37d38bb29d357ef475884123111224 Mon Sep 17 00:00:00 2001 From: Matt Stow Date: Thu, 18 Jul 2013 10:08:40 +1000 Subject: [PATCH 2/6] Added instruction to add width & height attributes --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 49ad8a9..e004092 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ **Usage:** +* If possible, add correct `width` and `height` attributes to your image map images. You can override these in CSS to make them responsive. * Add a link to jQuery in your page, preferably at the bottom just before the closing `` * After jQuery, either in a `` block or a separate file, call: From 7dcf4d7e82935d1a4ed0da9eec345cff25e9dfac Mon Sep 17 00:00:00 2001 From: Matt Stow Date: Tue, 6 Aug 2013 08:56:05 +1000 Subject: [PATCH 3/6] Dropped support for jQuery < 1.6. Caused issues since 1.10 & 2.0. Thanks @tobaiasjl --- jquery.rwdImageMaps.js | 19 +++++-------------- jquery.rwdImageMaps.min.js | 6 +++--- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/jquery.rwdImageMaps.js b/jquery.rwdImageMaps.js index 868ffd0..c9d7348 100644 --- a/jquery.rwdImageMaps.js +++ b/jquery.rwdImageMaps.js @@ -1,17 +1,16 @@ /* -* rwdImageMaps jQuery plugin v1.4 +* rwdImageMaps jQuery plugin v1.5 * * 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) 2012 Matt Stow +* Copyright (c) 2013 Matt Stow * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license */ ;(function($) { $.fn.rwdImageMaps = function() { - var $img = this, - version = parseFloat($.fn.jquery); + var $img = this; var rwdImageMap = function() { $img.each(function() { @@ -23,16 +22,8 @@ // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy $('').load(function() { - var w, - h, - attrW = 'width', - attrH = 'height'; - - // jQuery < 1.6 incorrectly uses the actual image width/height instead of the attribute's width/height - if (version < 1.6) - w = that.getAttribute(attrW), - h = that.getAttribute(attrH); - else + var attrW = 'width', + attrH = 'height', w = $that.attr(attrW), h = $that.attr(attrH); diff --git a/jquery.rwdImageMaps.min.js b/jquery.rwdImageMaps.min.js index 64c725f..7ea76b1 100644 --- a/jquery.rwdImageMaps.min.js +++ b/jquery.rwdImageMaps.min.js @@ -1,11 +1,11 @@ /* -* rwdImageMaps jQuery plugin v1.4 +* rwdImageMaps jQuery plugin v1.5 * * 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) 2012 Matt Stow +* Copyright (c) 2013 Matt Stow * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license */ -;(function(a){a.fn.rwdImageMaps=function(){var d=this,c=parseFloat(a.fn.jquery);var b=function(){d.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var f=this,e=a(f);a("").load(function(){var o,k,i="width",n="height";if(c<1.6){o=f.getAttribute(i),k=f.getAttribute(n)}else{o=e.attr(i),k=e.attr(n)}if(!o||!k){var p=new Image();p.src=e.attr("src");if(!o){o=p.width}if(!k){k=p.height}}var g=e.width()/100,l=e.height()/100,j=e.attr("usemap").replace("#",""),m="coords";a('map[name="'+j+'"]').find("area").each(function(){var s=a(this);if(!s.data(m)){s.data(m,s.attr(m))}var r=s.data(m).split(","),q=new Array(r.length);for(var h=0;h").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 Date: Thu, 12 Sep 2013 20:03:15 +1000 Subject: [PATCH 4/6] Fix #35 by mentioning unitless attributes. Other minor changes --- README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index e004092..2bb033f 100644 --- a/README.md +++ b/README.md @@ -4,29 +4,30 @@ --- -**Usage:** +#### Usage: -* If possible, add correct `width` and `height` attributes to your image map images. You can override these in CSS to make them responsive. +* 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. * Add a link to jQuery in your page, preferably at the bottom just before the closing `` * After jQuery, either in a `` block or a separate file, call: -`$('img[usemap]').rwdImageMaps();` +```js +$('img[usemap]').rwdImageMaps(); +``` You may also want to wrap it inside a `$(document).ready()` function, like so: -``` +```js $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); ``` ---- - -**Demo:** +#### Demo: -http://www.mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html +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)* \ No newline at end of file +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 From ded8104752d01c8e9cdc1438993ec8037a0effef Mon Sep 17 00:00:00 2001 From: Matt Stow Date: Fri, 16 Sep 2016 13:10:36 +1000 Subject: [PATCH 5/6] Added support for jQuery 3. Dropped <1.7. Fixes #103 --- LICENSE | 2 +- README.md | 2 +- jquery.rwdImageMaps.js | 26 +++++++++++++------------- jquery.rwdImageMaps.min.js | 6 +++--- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/LICENSE b/LICENSE index ff6c856..f3c197a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2013 Izilla Partners Pty Ltd +Copyright (c) 2016 Matt Stow Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in diff --git a/README.md b/README.md index 2bb033f..29dcef1 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,6 @@ http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html --- -Copyright (c) 2012 [Matt Stow](http://mattstow.com) +Copyright (c) 2016 [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 diff --git a/jquery.rwdImageMaps.js b/jquery.rwdImageMaps.js index c9d7348..93b3d0e 100644 --- a/jquery.rwdImageMaps.js +++ b/jquery.rwdImageMaps.js @@ -1,9 +1,9 @@ /* -* rwdImageMaps jQuery plugin v1.5 +* 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) 2013 Matt Stow +* Copyright (c) 2016 Matt Stow * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license @@ -11,22 +11,22 @@ ;(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() { + $('').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'); @@ -35,20 +35,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 +61,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..61854cd 100644 --- a/jquery.rwdImageMaps.min.js +++ b/jquery.rwdImageMaps.min.js @@ -1,11 +1,11 @@ /* -* rwdImageMaps jQuery plugin v1.5 +* 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) 2013 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("").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 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 Date: Tue, 18 Oct 2016 00:42:20 -0400 Subject: [PATCH 6/6] add CDNJS version badge in README.md This will show its version on CDNJS! --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 29dcef1..ae5d148 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # jQuery RWD Image Maps +[](https://cdnjs.com/libraries/jQuery-rwdImageMaps) ### 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 @@ -30,4 +31,4 @@ http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html Copyright (c) 2016 [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/