イメージマップって、結構昔使いましたよね。

（イメージマップって読んでましたが、正式にはクリッカブル・イメージマップ（略してクリッカブルマップと言うようです）知らなかったー）

ただ、レスポンシブが多くなった今でも、たまにイメージマップをどうしても使わないといけないことがあります。

これまでどおり設定したら、座標軸はずれちゃったりしてうまくいきません。

そんな時、「jQuery RWD Image Maps」を使用してスクリプトを読み込めば、後はこれまで通りのイメージマップ設定でレスポンシブになったのでご紹介

「jQuery RWD Image Maps」

GitHubのstowball/jQuery-rwdImageMapsからjsファイルをダウンロードしてサイトに設定します。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>

適宜調節して設定します。

あとは、通常どおりのイメージマップを作ればOKです。

Web上で作れる便利な「HTML Imagemap Generetor」

ところで、昔よくイメージマップ使っていたときには、DreamWeaverを使用していて、イメージマップをプレビュー見ながら作れる便利な機能があったんですよね。

最近、DW使わなくなったし、久々に開いたらその機能がなくなってた（どこかに隠れてるのかも？）ので、これはめんどくさいなあと思ったら、Web上で作れる便利なジェネレーター作ってる人がいました。マジ神、感謝感激！

イメージマップのコードを生成する HTML Imagemap Generetor を作ってみた

画像をドラッグして、エリアの枠を囲って、ソースをコピペするだけでOK！

なんて素敵なんだ〜！