【クリッカブルマップ】レスポンシブへの対応方法

レスポンシブのサイトでは、デバイス毎のウィンドウの横幅が変わるため、クリッカブルマップの座標がズレてしまいます。
「Image Map Generator」で作成したクリックの場所が変わっても対応できる方法です。

「jQuery RWD Image Maps」を使用します。

こちらのGithubにある、コードをダウンロードします。

「jQuery RWD Image Maps」

JSフォルダに格納

ダウンロードしたファイルを解凍すると、

・jquery.rwdImageMaps.js

・jquery.rwdImageMaps.min.js

上記のふたつのファイルが入っていますが、minと付いているファイルが容量が軽く、

このファイルのみで機能するので、jquery.rwdImageMaps.min.jsを使用します。

このjquery.rwdImageMaps.min.jsをJSフォルダに格納します。

例-JSフォルダ-

コードを記述

フォルダにファイルを格納できたら、

HTMLかJSファイルにコードを記述します。

HTMLファイルに記述の場合...

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(function(){
	$('img[usemap]').rwdImageMaps();
});
</script>

JSファイルに記述の場合...

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>

$(function(){
	$('img[usemap]').rwdImageMaps();
});

以上の記述で、ウィンドウ幅（座標位置）が変わってもクリックできるようになります。