https://www.ehitavada.com/inc/mapping/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);