わざわざ重いソフトを立ち上げなくても、面倒なイメージマップ作成が無料WEBツールでちょちょいのちょい！
レスポンシブ対応もjQueryでパパッとできちゃいます。
イメージマップ（クリッカブルマップ）とは？
1枚の画像上に複数のリンクを設定できるとても便利な機能。
よく賃貸物件のポータルサイトなどで見かける「地図上の県をクリックするとその県のページにリンクする」あれです。クリッカブルマップとも言います。
すきま堂で作成・運営しているこちらのサイトも、このイメージマップを使っています。
→茨城県新型コロナウイルスデータ収集所
一般的なつくり方としては画像の上で座標を１点ずつとり設定したい形をとっていくのですが、そのためにわざわざ重いソフトを立ち上げるのが本当に不便。
そこで今回は無料の超優秀WEBツールでサクッと作成します。
HTML Imagemap Generatorでイメージマップをつくってみよう
まずはHTML Imagemap Generatorのサイトへ
→HTML Imagemap Generator
ちなみに必要な作業は簡単３ステップ
①イメージマップに使用したい画像をアップ
②画像をクリックして形をつくる
右上にある図形を選んで画像上に作りたい形をクリックして作ります（赤丸部分）
※右側の四角で囲ってある座標が今回生成されたもの
③赤枠部分に生成されたコードを丸ごとhtmlファイルのイメージマップを挿入したい位置へ貼り付け
これだけで完成です！
ただこういう作業は性格が出ますね。
クリックするとその形が見えるのですが私のはクリックポイントが雑！
気になる方は細かくクリックポイントを置いていくときれいに仕上がりますよ。
レスポンシブ対応はjQuery-rwdImageMapsで
さてイメージマップは完成したわけですが問題が一つ。
イメージマップのwidthを％にしてレスポンシブ対応させようとすると座標がズレるんです。（座標を固定数値で取っているため）
そんなときに役立つのがこちらのjQuery。
→jQuery-rwdImageMaps
HTML
まずは先ほど生成してhtmlに貼り付けたコードにID名をつけます。
おそらく<img>から始まっていると思いますので、その外側に<div>を作りID名をつけてあげます。
<div id="map1">
<img>
<map>
この中に座標が入っているはず
</map>
</div>今回はmap1というIDをつけました。
CSS
div#map1 {
max-width: 100%;
width: auto;
}先ほどのmap1に対して上のように指示をします。
HTML</body>前
<script>
$('#map1').rwdImageMaps();
</script>htmlファイルの</body>の前へ上記のコードを挿入 ※#map1の部分がID名です
ID名が一致してないと動作しないので注意してくださいね。
これでイメージマップのレスポンシブ対応が完了です！
お手軽にイメージマップが作れるHTML Imagemap Generator。
イメージマップが必要な際にぜひ使用してみては？
