超簡単！jQueryを使ったレスポンシブ対応クリッカブルマップ『jQuery RWD Image Maps』

前回までにメディアクエリを使用して『既存のホームページをレスポンシブスマホ対応する方法』やレスポンシブ対応に最適な『jQueryを使った折りたたみ式のグローバルメニュー』をご紹介しました。

今回は、レスポンシブに対応した
jQueryを使ったクリッカブルマップ（イメージマッピング）『jQuery RWD Image Maps』についてご紹介いたします。

クリッカブルマップ（イメージマッピング）メリット、デメリット

クリッカブルマップのメリット

• 複雑なデザイン（紙媒体用のチラシや、建設業の設計図や地図など）に対してリンクを貼る際に工数を短縮できる。
• 元々のデザインを損なうことがない。

クリッカブルマップのデメリット

• 画像が大きくなりがちでページが重くなる。
• 画像内テキストがSEOとして働かない。
• レスポンシブ対応を行うと画像サイズが可変となり、リンクエリアがずれる。

デメリットのうち、1つ目と2つ目の部分は承知のうえで利用していると思いますので、3つ目のレスポンシブ対応の部分を解決するために『jQuery RWD Image Maps』を使います。
条件として、工数短縮がクリッカブルマップを使う理由の1つでもあるので、そういった意味でも『jQuery RWD Image Maps』は工数短縮のメリットを損なわず実装することが可能です。

早速実装してみましょう

今回は「既存のクリッカブルマップありのページをレスポンシブ化したところ、クリッカブルマップがずれて使えなくなってしまった。」というところからレスポンシブ対応のクリッカブルマップを実装する過程をご説明いたします。

まずはこちらからファイルをダウンロードします。

HTML内にScriptファイルを設定する

htmlファイルに記述

HTMLにjQueryのファイルとjquery.rwdImageMaps.jsのファイルを読み込む記述、スクリプトに命令を出す記述を追加します。

jquery.rwdImageMaps.jsの中身を編集する必要はありません。これで終了です。

DEMOページをご確認ください。ブラウザ幅を狭めて画像サイズが変わってもクリッカブルマップがずれていないことが確認できると思います。

まとめ

クリッカブルマップは複雑なレイアウトのチラシやバナー、地図に使って工数の短縮とデザインの維持が可能になりますので、とても便利な反面、今回のようにレスポンシブ対応した際に正常に動かなくなってしまいます。
せっかくクリッカブルマップを使って工数短縮してもレスポンシブ対応に工数をかけてしまったら元も子もないので、今回のようにレスポンシブ対応させても工数が少ないことは非常にありがたいですね。