はじめに
実務案件でクライアント様より、1枚の画像の中に複数のリンクを追加する仕様で作成して欲しいというご指示があったため、Image Mapを使用して作成しました。
Image Mapの動作確認
まずはImage Mapの動作確認をしていただければと思います。
下記で「赤、青、緑、黄色」の4色がある、1枚の画像を用意しました。
各色をクリックするとアンカーリンクで各色がある部分に遷移するのが確認できます。
PR
Image Mapとは？
HTML内の画像上の特定の領域に対してリンクを関連付けるための方法です。Image Mapは、特に画像内の異なる部分に異なるリンクを設定したい場合に便利です。HTMLでImage Mapを作成するには、以下の要素と属性を使用します。
<map>要素
Image Mapを定義するための要素です。<map> 要素には name 属性を付けて一意の名前を指定します。この名前は画像と関連づけるために使用されます。
例
<map name=
"ImageMap"> ~ </map>としたとき<img src="~" alt="~" usemap="#ImageMap"><area>要素
画像内の特定の領域を定義し、それに対するリンクやアクションを設定するための要素です。<area> 要素は、<map> 要素内に配置され、以下の属性を使用します。
shape属性
Image Mapの形状を指定します。一般的な値には “rect”（矩形）、”circle”（円）、”poly”（多角形）があります。
coods属性
Image Mapのの座標を指定します。座標は形状に応じて異なります。たとえば、shape="rect" の場合、coords 属性には左上の x 座標、左上の y 座標、右下の x 座標、右下の y 座標の順に値を指定します。
この座標を正しく指定することで、赤色の部分をクリックしたときだけ赤色に遷移、青色の部分をクリックしたときだけ青色に遷移するという動きができるようになります。
href属性
Image Mapのリンク先のURLを指定します。
その他の属性
alt, targetなどがあります。
Image Mapのソースコード例
<img src="#" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="rect" coords="0,0,546,301" href="" alt="" />
<area shape="rect" coords="561,0,1107,301" href="" alt="" />
<area shape="rect" coords="0,316,546,617" href="" alt="" />
<area shape="rect" coords="561,316,1107,617" href="" alt="" />
</map>Image Mapのソースコードの作成方法
coordsの座標の作成が難しいと思います。今回の例のような長方形（shape属性がrect）の場合は計算がしやすいですが、円形や、多角形の場合はもっと難しいです。
しかし、下記のImage Mapジェネレーターというものがあります。そちらを使用すればマウスをドラッグ&ムーブするだけで直感的に作成ができます。作成者の方ありがとうございます。
Imagemap の HTML コードを作成するジェネレーターです。…
Image Mapジェネレーター使い方
Image Mapジェネレーターに画像をアップロードする
Image Mapジェネレーターで<area>のcoords属性の座標を作成する
今回は長方形なので、右上の「矩形を描く」を選択して各色を覆うようにドラッグ&ムーブをします。できたら右側のHTMLにソースコードが自動で作成されます。必要に応じて幅の調整をします。これを各色全部に行ってください。そして完成したソースコードを使用してください。
Image Mapのレスポンシブ対応について
Image Mapジェネレーターで作成したcoods属性の座標は絶対指定になるので、レスポンシブ対応には対応しておりません。「image-map-resizer」というライブラリを使用することでレスポンシブ対応ができるようになります。
下記公式よりCDNをコピーしてください。
Make the HTML image map responsive, so the map scales with t…
そして</body>タグの上などのHTMLファイルの適切な位置に下記を追加してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
imageMapResize();
</script>まとめ
今回は1つの画像に複数のリンクを追加する方法についてご紹介しました。このような案件がありましたら、Image Mapを使用して作成してみてください。
