BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

2018.09.29

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

1

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

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

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

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

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

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

ヨカね!

この記事が面白かったらポチッってください!

関連記事

Contact