当サイトではCookieを使用します。Cookieの使用に関する詳細は「プライバシーポリシー」をご覧ください。
OK
 
2018.09.29

jQuery レスポンシブサイトでもクリッカブルマップを対応させるプラグイン「jQuery-rwdImageMaps」を紹介

417

レスポンシブのサイトを作ったはいいけど、スマホやタブレットだと画像のサイズが変わってしまってクリッカブルマップの座標がズレてしまうということがあります。
この際にリサイズされた画像のパーセンテージを自動で計算して座標ポインタを振り直してくれるjQueryのプラグイン「jQuery-rwdImageMaps」をご紹介します。

実際の挙動はこちらで確認できます。
DEMO

読み込むファイルは、まず基本の「jquery.js」とそして「jquery.rwdImageMaps.min.js」ファイルです。

「jquery.rwdImageMaps.min.js」ファイルはstowballさんがGitHubで公開されています。
GitHub

使い方は、とっても簡単でクリッカブルマップをおいてあるページに上述したファイル(2つ)を読み込ませて以下スクリプトを書くだけでOKです。

これでパソコン版用に設定したクリッカブルマップの記述を自動で読み取って座標ポインタを画像に合わせて配置し直してくれます。
超、簡単ですね。では(‘ω’)ノ

Contact