Map is inactive if parent is hidden

[brunodegoyrans]

Symptom:
If the img/map is inside a hidden parent, for example in a bootstrap tab, then the map is not working when the parent becomes visible.

Cause:
Plugin uses functions width() and height() that are known to mis-work if the parent is hidden.
So the wPercent and hPercent have wrong value that might resize the map very small. Then the map seems inoperant.

var wPercent = $that.width()/100,
    hPercent = $that.height()/100,

Solution:
Make parents visible just before calling width() then restore invisibility.

Modified code:

/*
* rwdImageMaps jQuery plugin v1.6.x
*
* 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
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(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
			$('<img />').on('load', function() {

				// Modif BC : make ancestors visible so .width() can return the right value
				//************************************************
				var hidden_ancestors = [];
				$that.parents().each(function() {
					if ($(this).css('display') == 'none')
					{

				$(this).show();
						hidden_ancestors.push($(this));
					};
				});
				// END Modif BC

				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;
				}

				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);
						else
							coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
					}
					$this.attr(c, coordsPercent.toString());
				});


				// Modif BC : Restore invisibility on ancestors
				//*********************************************
				jQuery.each(hidden_ancestors, function(index, value)
				{
					$(value).css({display: ''});
				});
				// END Modif BC

			}).attr('src', $that.attr('src'));
		});
	};
	$(window).resize(rwdImageMap).trigger('resize');

	return this;
};
})(jQuery);

[kangTaehee]

w = $that.attr(attrW),h = $that.attr(attrH);
↓
w = $that[0].naturalWidth,h = $that[0].naturalHeight;
I made this correction.

[abmultimedia]

I needed to change:
$(value).css({display: ''});
↓
$(value).css({display: 'none'});

...but I found this useful. Thanks!