JavaScript

jquery.rwdImageMaps.jsとレスポンシブデザインでクリッカブルマップを作成する方法

  /

この記事では、jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応させる方法をご紹介します。
これにより、ユーザーがどのデバイスを使用していても適切なインタラクティブ体験を提供できます。

Contents

はじめに

ウェブサイトのデザインにおいて、画像の一部をクリック可能にするmapタグを使うことがあります。しかし、デバイスの画面サイズが変わると、従来のmapタグは正確に機能しないことがあります。そこで、jquery.rwdImageMaps.jsを使用して、画像マップをレスポンシブに対応させる方法を説明します。

CSSの設定

まず、mapタグを設定する画像（img[usemap]）のCSSを設定します。必要に応じて以下のスタイルを変更してください。

<style>
body {
  font-size: 18px;
  text-align: center;
  line-height: 1.8em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
p{
  padding-bottom: 10px;
}
img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}
</style>

　
このCSS設定により、画像がレスポンシブに対応し、さまざまな画面サイズで適切に表示されるようになります。

HTMLの設定

次に、HTMLコードを記述します。ここでは、mapタグを設定する画像（logo1.jpg）を用意し、その中の文字（「D」と「U」）にマップを設定します。各areaタグのalt属性に文字を設定し、クリックした際に表示させるメッセージを指定します。

<h1>jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応します。</h1>
<p>以下の画像の「D」と「U」文字にmapタグ（クリッカブルマップ）を設定してます。<br>「D」と「U」をクリックすると各altに設定している文字をalertメッセージで表示します。<br>ブラウザ幅を拡大・縮小させてクリックしてみて下さい。</p>

<img src="logo1.jpg" usemap="#logo" alt="" />
<map name="logo">
  <area shape="rect" coords="131,236,347,506" href="./" alt="「D」をクリックしました。">
  <area shape="rect" coords="401,235,622,512" href="./" alt="「U」をクリックしました。">
</map>

　
この設定により、画像の特定の部分をクリック可能にし、クリック時にメッセージを表示させることができます。

JavaScriptの設定

最後に、必要なJavaScriptファイルjquery.min.js（v1.10.2）、jquery.rwdImageMaps.min.jsファイルを読み込み、$(‘画像エリア’).rwdImageMaps()を適用します。
mapタグに設定した各areaタグをクリックすると、alt属性に設定された文字をalertメッセージで表示する処理を追加します。

<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
  
  $('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
  });
});
</script>

　
このスクリプトにより、画像マップがレスポンシブに対応し、各エリアをクリックした際に指定したメッセージが表示されるようになります。

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するデモページ

実際に動作するデモページも用意しています。以下のリンクから確認できます。

jquery.rwdImageMaps.jsを使って画像のmapタグ（クリッカブルマップ）を自動調整でレスポンシブ対応するデモページ

ソース元：jQuery-rwdImageMaps

jQuery-rwdImageMaps

まとめ

jquery.rwdImageMaps.jsを使うことで、画像のmapタグをレスポンシブ対応にすることが簡単にできます。これにより、さまざまなデバイスで一貫したインタラクティブ体験を提供でき、ユーザーエクスペリエンスを向上させることができます。ぜひ、この記事を参考にして、自身のプロジェクトに取り入れてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.rwdImageMaps.js mapタグ クリッカブルマップ
関連記事