クリックするだけ!HTML Imagemap Generatorで簡単にイメージマップを作ろう

imagemap WEBツール

わざわざ重いソフトを立ち上げなくても、面倒なイメージマップ作成が無料WEBツールでちょちょいのちょい!
レスポンシブ対応もjQueryでパパッとできちゃいます。

イメージマップ(クリッカブルマップ)とは?

1枚の画像上に複数のリンクを設定できるとても便利な機能。

よく賃貸物件のポータルサイトなどで見かける「地図上の県をクリックするとその県のページにリンクする」あれです。クリッカブルマップとも言います。

すきま堂で作成・運営しているこちらのサイトも、このイメージマップを使っています。
→茨城県新型コロナウイルスデータ収集所

一般的なつくり方としては画像の上で座標を1点ずつとり設定したい形をとっていくのですが、そのためにわざわざ重いソフトを立ち上げるのが本当に不便。

そこで今回は無料の超優秀WEBツールでサクッと作成します。

HTML Imagemap Generatorでイメージマップをつくってみよう

まずはHTML Imagemap Generatorのサイトへ
→HTML Imagemap Generator

ちなみに必要な作業は簡単3ステップ

HTML Imagemap Generator1

①イメージマップに使用したい画像をアップ

HTML Imagemap Generator2

②画像をクリックして形をつくる
 右上にある図形を選んで画像上に作りたい形をクリックして作ります(赤丸部分)
 ※右側の四角で囲ってある座標が今回生成されたもの

HTML Imagemap Generator3

③赤枠部分に生成されたコードを丸ごと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
イメージマップが必要な際にぜひ使用してみては?