目次
クリッカブルマップとは？
Webページ上で、一枚の画像の特定の部分にリンクを設定できる「クリッカブルマップ（イメージマップ）」の作り方を紹介します。これを利用すると、地図やインフォグラフィックなどの一部をクリック可能にし、特定のページに誘導することができます。
クリッカブルマップの基本HTML
以下のHTMLを使用すると、画像の特定の部分にリンクを設定できます。
<div class="japan">
<img src="https://web-developer-note.com/codepen/images/japan.jpg" usemap="#japan" alt="日本地図" loading="lazy" class="imgauto">
<map name="japan">
<area shape="rect" coords="846,81,1082,235" href="https://ja.wikipedia.org/wiki/北海道" alt="北海道" target="_blank">
<area shape="rect" coords="860,258,1031,540" href="https://ja.wikipedia.org/wiki/東北地方" alt="東北地方" target="_blank">
<area shape="rect" coords="828,556,1018,724" href="https://ja.wikipedia.org/wiki/関東地方" alt="関東地方" target="_blank">
<area shape="rect" coords="652,473,822,709" href="https://ja.wikipedia.org/wiki/中部地方" alt="中部地方" target="_blank">
<area shape="rect" coords="487,466,649,714" href="https://ja.wikipedia.org/wiki/近畿地方" alt="近畿地方" target="_blank">
<area shape="rect" coords="321,463,480,589" href="https://ja.wikipedia.org/wiki/中国地方" alt="中国地方" target="_blank">
<area shape="rect" coords="321,611,478,712" href="https://ja.wikipedia.org/wiki/四国地方" alt="四国地方" target="_blank">
<area shape="rect" coords="144,526,301,739" href="https://ja.wikipedia.org/wiki/九州" alt="九州" target="_blank">
<area shape="rect" coords="53,746,134,826" href="https://ja.wikipedia.org/wiki/沖縄県" alt="沖縄県" target="_blank">
</map>
</div>解説
<img>タグのusemap属性で<map>を指定。<map>タグのname属性が<img>のusemapに対応。<area>タグでクリッカブルエリアを定義し、各地域へのリンクを設定。
使用しているリセットクラスについて:
imgauto
当ブログではimgタグに対して以下のリセットを行っております。
img{
height: auto;
max-width: 100%;
box-sizing: unset;
vertical-align: bottom;
}
.imgauto{
height: auto;
width: 100%;
box-sizing: unset;
line-height: 1rem;
display: block;
}HTML生成ツール
ImagemapGenerator を使えば簡単HTMLが生成できます。
画像マップをレスポンシブ対応させる
通常の <area> タグは画像サイズが変化すると座標がずれてしまいます。これを防ぐために jQuery.rwdImageMaps.js を使用します。
jQueryプラグインを導入
以下のスクリプトを追加します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>ポイント
jQuery.rwdImageMaps.jsは<area>タグの座標を画像サイズに応じて調整。- これにより、ウィンドウサイズが変化してもクリック範囲がずれない。
クリッカブルマップを作る際の注意点
img タグの width・height を指定しない
img タグに width や height を指定すると、レスポンシブ時に正しく縮小されません。CSSで max-width: 100% を指定すると、親要素の幅に応じてスケールします。
.imgauto{
height: auto;
width: 100%;
box-sizing: unset;
line-height: 1rem;
display: block;
}まとめ
- 画像の特定部分にリンクを設置するには
<map>と<area>タグを使用。 jQuery.rwdImageMaps.jsを使うことでレスポンシブ対応可能。imgのwidth・heightを指定せず、CSSで調整。
レスポンシブデザイン対応のWebサイトに画像マップを導入する際に、ぜひ参考にしてください！