こんにちは。
今回は、WEBページに表示した画像の特定の部分にレスポンシブ対応のリンクを設定してクリックできるようにする方法をご紹介します。
クリックできる画像のサンプル
文章で「画像の特定部分にレスポンシブ対応したリンクを設定してクリックできるようにする」と言ってもなかなかピンとこないかもしれないの、まずはこちらよりそのサンプルをご覧ください。
コードの全体像
以下が上記のサンプルを構成するHTMLです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ImageMapのデモ</title>
<!-- Start ImageMapのレスポンシブ設定 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>imageMapResize();</script>
<!-- End ImageMapのレスポンシブ設定 -->
</head>
<body>
<ul>
<li>グレー部分が1枚の画像です</li>
<li>青色の部分がクリックできます</li>
</ul>
<!-- Start 画像の表示 -->
<img src="./sample.png" usemap="#sampleImageMap" alt="ImageMapのサンプル" />
<!-- End 画像の表示 -->
<!-- Start ImageMapの設定 -->
<map name="sampleImageMap">
<area shape="rect" coords="92,536,404,707" href="https://www.kaname-gh.co.jp/company/" alt="会社情報" />
<area shape="circle" coords="306,278,200" href="https://www.kaname-gh.co.jp/website-production-plan/" alt="WEB制作" />
<area shape="poly" coords="601,267,462,705,740,707,740,707" href="https://www.kaname-gh.co.jp/recruit/" alt="採用情報" />
</map>
<!-- End ImageMapの設定 -->
</body>
</html>map要素でイメージマップ（クリックできる部分）を設定
...
<map name="sampleImageMap">
<area shape="rect" coords="92,536,404,707" href="https://www.kaname-gh.co.jp/company/" alt="会社情報" />
<area shape="circle" coords="306,278,200" href="https://www.kaname-gh.co.jp/website-production-plan/" alt="WEB制作" />
<area shape="poly" coords="601,267,462,705,740,707,740,707" href="https://www.kaname-gh.co.jp/recruit/" alt="採用情報" />
</map>
...map要素のname属性にそのイメージマップの名前を設定し、area要素でクリックできる部分を定義します。
上記のサンプルでは次のとおりarea要素を設定しています。
- shape属性：クリックできる部分の形
- coords属性：クリックできる部分の座標
- href属性：リンク先のURL
- alt属性：代替テキスト
イメージマップジェネレーターを使うと、area要素を正確に設定することが可能です。
img要素のusemap属性でイメージマップの設定を反映
...
<img src="./sample.png" usemap="#sampleImageMap" alt="ImageMapのサンプル" />
...img要素のusemap属性にmap要素のname属性を「#」つきで記載することで、その画像のイメージマップが反映されます。
ImageMapEesizer.jsでイメージマップをレスポンシブ対応に設定
上記までで「画像の特定部分にリンクを設定してクリックできるようにする」ことは可能です。
しかし、スマートフォンでWEBページが閲覧されたときにイメージマップの設定がズレてしまい、意図しない部分にリンクが設定されることがあります。
それを防ぐため、イメージマップをレスポンシブ対応させておきます。
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>imageMapResize();</script>
...ImageMapResizer.jsを読み込み、imageMapResize()を実行します。
