イメージマップって座標の設定がとにかく面倒ですよね。
そう思っているWEB制作者の方は少なくないはず。

イメージマップを利用する機会自体がそんなに多くはありませんが、昔、デバックツールで座標を確認しながら制作したのを覚えています。

今回たまたまイメージマップを利用するサイトの制作がありましたので、どうにか楽できないかなぁと探してましたら、ありました。
とんでもなく便利な超機能。
早速ご紹介しましょう。

HTML Imagemap Generator

これで面倒な座標設定が大いに楽になりました。ありがたや！
利用方法は制作者様のブログ記事にて本人直々にご教示いただいております。

制作者様のブログ記事
イメージマップのコードを生成する HTML Imagemap Generetor を作ってみた

ちなみにイメージマップのレスポンシブ対応jQueryプラグインもあります。

https://github.com/stowball/jQuery-rwdImageMaps

利用方法はこちらも超簡単。

<img src="imageMapSample.jpg" usemap="#imageMapSample">
<map name="imageMapSample">
	<area shape="circle" coords="138,494,134" href="#" alt="ベリー" />
	<area shape="circle" coords="462,489,133" href="#" alt="ブルーベリー" />
	<area shape="circle" coords="788,473,156" href="#" alt="イチゴ" />
	<area shape="circle" coords="1125,490,138" href="#" alt="チェリー" />
</map>

こんな感じで用意したイメージマップを

<script type="text/javascript" src="jquery.jsのパス"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.jsのパス"></script>
<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
</script>

こんな感じでレスポンシブ対応完了。スマホサイトもばっちりです。
上のスクリプトは各jsファイルのパス以外、コピペで使えます。