Responsive image link map

This is a Copy and Paste Quick fix solution for HTML Image Map linking for responsive design with Javascript and Jquery. Add this code before closing your body tag.

<img src="images/worldmap-world-map.jpg"   usemap="#image-map">
       
       
<map name="image-map">
    <area target="" alt="North America/Canada" title="North America/Canada" href="#" coords="373,217,393,255,405,272,405,312,391,373,354,368,352,415,371,443,344,473,290,496,213,446,168,395,155,354,137,312,114,293,87,291,45,315,41,276,30,240,18,216,27,185,35,156,59,146,116,153,128,177,155,161,169,152,178,108,260,110,283,70,313,66,344,76,336,143,323,175,376,233,404,277,369,262" shape="poly">
    <area target="" alt="Sri Lanka" title="Sri Lanka" href="#" coords="931,505,892,460" shape="rect">
    <area target="" alt="Europe" title="Europe" href="#" coords="606,362,633,369,654,385,670,371,679,395,707,404,747,364,777,354,776,269,756,270,753,229,732,224,726,205,707,205,706,158,684,158,624,224,617,248,575,225,536,226,534,244,574,255,601,254,584,265,565,279,574,306,564,327,543,335,546,370,575,384,611,379" shape="poly">
    <area target="" alt="Australia" title="Australia" href="#" coords="1011,611,1035,588,1056,575,1079,570,1088,550,1122,551,1134,574,1150,575,1149,532,1168,537,1180,574,1189,582,1197,598,1195,639,1175,650,1176,667,1156,671,1151,691,1111,696,1097,658,1075,650,1067,663,1048,675,1009,660" shape="poly">
    <area target="" alt="East Asia" title="East Asia" href="#" coords="948,405,966,399,975,358,1051,357,1067,335,1089,333,1102,340,1109,362,1125,383,1124,405,1068,407,1067,431,1058,451,1023,470,1034,487,1068,474,1088,493,1073,523,1050,549,1013,558,992,519,971,489,959,451,962,436" shape="poly">
</map>

!function(){"use strict";function a(){function a(){function a(a,d){function e(a){var d=1===(f=1-f)?"width":"height";return c[d]+Math.floor(Number(a)*b[d])}var f=0;j[d].coords=a.split(",").map(e).join(",")}var b={width:l.width/l.naturalWidth,height:l.height/l.naturalHeight},c={width:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-top"),10)};k.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(m),m=setTimeout(a,250)}function d(){l.width===l.naturalWidth&&l.height===l.naturalHeight||a()}function e(){l.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof i._resize}function g(a){return document.querySelector('img[usemap="'+a+'"]')}function h(){j=i.getElementsByTagName("area"),k=Array.prototype.map.call(j,b),l=g("#"+i.name)||g(i.name),i._resize=a}var i=this,j=null,k=null,l=null,m=null;f()?i._resize():(h(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
//# sourceMappingURL=imageMapResizer.map
jQuery('map').imageMapResize();
//Calling with Jquery