Following code shows how to make image maps responsive.
<div style="width:100%;"> <img id="img_ID" src="http://1.gravatar.com/avatar/a8ffc3906145930fb83c53e865a89619?s=200" usemap="#map" border="0" width="100%" alt="" /> </div> <map id="map_ID" name="map"> <area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" /> <area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" /> <area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" /> </map> <script> window.onload = function () { var ImageMap = function (map, img) { var n, areas = map.getElementsByTagName('area'), len = areas.length, coords = [], previousWidth = 128; for (n = 0; n < len; n++) { coords[n] = areas[n].coords.split(','); } this.resize = function () { var n, m, clen, x = img.offsetWidth / previousWidth; for (n = 0; n < len; n++) { clen = coords[n].length; for (m = 0; m < clen; m++) { coords[n][m] *= x; } areas[n].coords = coords[n].join(','); } previousWidth = img.offsetWidth; return true; }; window.onresize = this.resize; }, imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID')); imageMap.resize(); return; } </script>