シュウ

今回は【jQuery】HTMLのイメージマップのリンクがズレる原因
の解説になります！

• HTMLのイメージマップを使用しているWeb制作者
• スマートフォンのレスポンシブ対応で困っているコーダー
• JavaScriptを使ってWebサイトの不具合を解決したい方

イメージマップとは

Webサイト制作で、1枚の画像に複数のリンクを設定できる「イメージマップ（image map）」。
地図や店舗一覧など、画像内の特定の場所から別のページへ遷移させたい場合に便利なHTMLの機能です。

しかし、レスポンシブ対応で画像を縮小すると、設定したリンクのクリック範囲がズレてしまうことがあります。
今回は、実際のWebサイト制作で発生したイメージマップのリンクのズレについて、
原因とJavaScriptライブラリ「imageMapResizer」を使った解決方法を紹介します。

イメージマップを作成

最初に、イメージマップを作成をしなけれなりません。
以下のサイトは初心者の方でも、簡単に作成できます。

Image-Map.net は、ブラウザ上で誰でも簡単にHTMLイメージマップ（1枚の画像の中に複数のリンク領域を設定する記述）を作成できる無料のオンラインツールです。
専用ソフトのインストールや会員登録は一切不要で、サイトにアクセスして画像を読み込むだけで即座に使用できます。

公式サイト

Image-Map.netの使い方

イメージマップの基本的なHTML構成について

イメージマップは、imgタグのusemap属性と、map・area タグを組み合わせて実装します。
以下のようになります。

<img src="sample.jpg" usemap="#image-map" alt="イメージマップ">
<map name="image-map">
 <area shape="rect" coords="516,151,666,227" href="" target="_blank" alt="" title="">
 <area shape="rect" coords="803,210,952,283" href="" target="_blank" alt="" title="">
 <area shape="rect" coords="803,316,953,389" href="" target="_blank" alt="" title="">
 <area shape="rect" coords="52,328,200,403" href="" target="_blank" alt="" title="">
</map>

それぞれの役割は以下のとおりです。

shape="rect" は四角形の範囲を指定する属性で、coords には左上と右下の座標を記述します。
このように、areaを複数設定することで、1枚の画像に複数のリンクを設置できます。

イメージマップのリンクがズレる原因とは

イメージマップのリンクがズレる原因の一つは、画像の表示サイズとリンク範囲の座標が一致しなくなることです。
HTMLのareaとareaで指定するcoordsは、基本的に元画像のピクセル単位の座標です。
例えば、以下の指定の場合、

<img src="sample.jpg" usemap="#image-map" alt="イメージマップ">
<map name="image-map">
 <area shape="rect" coords="516,151,666,227" href="" target="_blank" alt="" title="">
</map>

coords="516,151,666,227"は、画像の左上を基準に、
左から516px、上から151pxの位置を起点とした範囲を指定しています。
※元画像が 1000px 幅の場合のイメージ

ところが、スマートフォンなどで画像をCSSによって縮小表示すると、画像そのものは小さくなりますが、areaの座標は元のピクセル値のままです。

例えば、元画像が幅1000pxで、画面上では幅320pxに縮小されている場合、
画像は約0.32倍になっているのに、リンク範囲は元の座標を基準にしているため、実際の表示位置とクリック範囲が一致せず、ズレが発生します。

レスポンシブ対応で画像を縮小するとズレが発生する原因

PCでは正常にリンクが動作していても、スマートフォンでは画像が画面幅に合わせて縮小されることがあります。
例えば、元画像の横幅が1000pxで、スマートフォンでの表示幅が320pxの場合、画像は元の約32%の大きさになります。

img { 
　width: 100%; 
　height: auto; 
}

このようにCSSで画像を縮小しても、areaに設定した座標は自動的には変更されません。
そのため、画像だけが縮小され、リンクのクリック範囲が元の座標のまま残ることで、画像上のリンク位置と実際のクリック範囲がズレてしまいます。

imageMapResizerを使ってリンクのズレを解決する方法

イメージマップのリンクのズレを解決するために、今回はJavaScriptライブラリの「imageMapResizer」を使用しました。
imageMapResizerは、画像の表示サイズに合わせてイメージマップの座標を調整できるライブラリです。
まずは、CDNを利用してimageMapResizerを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>

このコードをHTMLの/body直前などに記述します。
ライブラリを読み込んだら、以下のJavaScriptを記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
    imageMapResize();
});
</script>

DOMContentLoadedはHTMLの解析が完了したタイミングで処理を実行するイベントです。
そのタイミングでimageMapResize() を呼び出すことで、ページ内のイメージマップの座標を画像の表示サイズに合わせて調整します。

これで、画像の表示サイズに合わせてイメージマップのクリック範囲が調整されるようになります。
なお、画像のサイズが後から変更される場合などは、再調整が必要になることがあります。
また、ライブラリの読み込みが正常に完了していることも確認してください。

PCのブラウザで表示を確認するだけでなく、スマートフォンの実機でもリンクのクリック範囲が正しいか確認することが大切です。
画面幅によって画像の表示サイズが変わるため、複数の画面幅でリンクの動作をチェックしてください。

まとめ

今回はこれで以上です。
HTMLのイメージマップは、1枚の画像に複数のリンクを設定できる便利な機能ですが、レスポンシブ対応で画像を縮小すると、リンクのクリック範囲がズレることがあります。
今回のような問題は、JavaScriptライブラリの「imageMapResizer」を使用することで、画像の表示サイズに合わせて座標を調整し、解決できます。

テンプレートを見る

Web・デザインの本棚を見る

< 前の記事

【WordPress】Change Usernameで ユーザーネームを変更する方法

次の記事 >

【JavaScript】HTML・CSSでコピーボタン付きコードブロックを作成する方法