概要
イメージマップをレシポンシブにする方法で検索すると
「jQuery-rwdImageMaps」を利用する方法が圧倒的に多いのですが
もっと簡単な方法を見つけました。（一部では常識なのかもしれませんが...）
とにかく「jQuery」も「jQuery-rwdImageMaps」も不要です。
javascriptで拡大縮小を指定すればレシポンシブにも対応できます。
※レシポンシブに対応する方法は今回は割愛
方法
CSS の transform を設定するだけです。
※画像の左上を原点として1.5倍に拡大する例です。
transform-origin:left top;
transform: scale(1.5,1.5);例
<html><head>
<style>
img{
transform-origin:left top;
transform: scale(1.5,1.5);
}
</style>
</head>
<body>
<p><img src="（画像URL）" alt="サンプル" usemap="#example" width="500" height="200"></p>
<map name="example">
<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="丸">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
</map>
</body></html>備考
間違いなど何かお気づきの点などございましたら、ご指摘いただけますと幸甚です。