├── LICENSE
├── README.md
├── jquery.rwdImageMaps.js
└── jquery.rwdImageMaps.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Matt Stow
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jQuery RWD Image Maps
 2 | [![CDNJS](https://img.shields.io/cdnjs/v/jQuery-rwdImageMaps.svg)](https://cdnjs.com/libraries/jQuery-rwdImageMaps)
 3 | 
 4 | ### 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
 5 | 
 6 | ---
 7 | 
 8 | #### Usage:
 9 | 
10 | * 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.
11 | * Add a link to jQuery in your page, preferably at the bottom just before the closing `</body>`
12 | * After jQuery, either in a `<script>` block or a separate file, call:
13 | 
14 | ```js
15 | $('img[usemap]').rwdImageMaps();
16 | ```
17 | 
18 | You may also want to wrap it inside a `$(document).ready()` function, like so:
19 | 
20 | ```js
21 | $(document).ready(function(e) {
22 |     $('img[usemap]').rwdImageMaps();
23 | });
24 | ```
25 | 
26 | #### Demo:
27 | 
28 | http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
29 | 
30 | ---
31 | 
32 | Copyright (c) 2016 [Matt Stow](http://mattstow.com)  
33 | Licensed under the MIT license *(see [LICENSE](https://github.com/stowball/jQuery-rwdImageMaps/blob/master/LICENSE) for details)*  
34 | Minified version created with Online YUI Compressor: http://www.refresh-sf.com/yui/
35 | 


--------------------------------------------------------------------------------
/jquery.rwdImageMaps.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * rwdImageMaps jQuery plugin v1.6
 3 | *
 4 | * 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
 5 | *
 6 | * Copyright (c) 2016 Matt Stow
 7 | * https://github.com/stowball/jQuery-rwdImageMaps
 8 | * http://mattstow.com
 9 | * Licensed under the MIT license
10 | */
11 | ;(function($) {
12 | 	$.fn.rwdImageMaps = function() {
13 | 		var $img = this;
14 | 
15 | 		var rwdImageMap = function() {
16 | 			$img.each(function() {
17 | 				if (typeof($(this).attr('usemap')) == 'undefined')
18 | 					return;
19 | 
20 | 				var that = this,
21 | 					$that = $(that);
22 | 
23 | 				// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
24 | 				$('<img />').on('load', function() {
25 | 					var attrW = 'width',
26 | 						attrH = 'height',
27 | 						w = $that.attr(attrW),
28 | 						h = $that.attr(attrH);
29 | 
30 | 					if (!w || !h) {
31 | 						var temp = new Image();
32 | 						temp.src = $that.attr('src');
33 | 						if (!w)
34 | 							w = temp.width;
35 | 						if (!h)
36 | 							h = temp.height;
37 | 					}
38 | 
39 | 					var wPercent = $that.width()/100,
40 | 						hPercent = $that.height()/100,
41 | 						map = $that.attr('usemap').replace('#', ''),
42 | 						c = 'coords';
43 | 
44 | 					$('map[name="' + map + '"]').find('area').each(function() {
45 | 						var $this = $(this);
46 | 						if (!$this.data(c))
47 | 							$this.data(c, $this.attr(c));
48 | 
49 | 						var coords = $this.data(c).split(','),
50 | 							coordsPercent = new Array(coords.length);
51 | 
52 | 						for (var i = 0; i < coordsPercent.length; ++i) {
53 | 							if (i % 2 === 0)
54 | 								coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
55 | 							else
56 | 								coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
57 | 						}
58 | 						$this.attr(c, coordsPercent.toString());
59 | 					});
60 | 				}).attr('src', $that.attr('src'));
61 | 			});
62 | 		};
63 | 		$(window).resize(rwdImageMap).trigger('resize');
64 | 
65 | 		return this;
66 | 	};
67 | })(jQuery);
68 | 


--------------------------------------------------------------------------------
/jquery.rwdImageMaps.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * rwdImageMaps jQuery plugin v1.6
 3 | *
 4 | * 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
 5 | *
 6 | * Copyright (c) 2016 Matt Stow
 7 | * https://github.com/stowball/jQuery-rwdImageMaps
 8 | * http://mattstow.com
 9 | * Licensed under the MIT license
10 | */
11 | ;(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("<img />").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<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
12 | 


--------------------------------------------------------------------------------