クリッカブル・マップをレスポンシブ対応
最近なにかとレスポンシブデザインで作成する案件が増えてきました。
その際、クリッカブル・マップを使う箇所が出た際、
普通に area を作ってしまうと、
画像を可変してもその coords ポイントは書き替わらないので、
マップしたものがズレてしまいます。
そこで、jQueryプラグインを使用します。
使用方法は簡単で、jQuery と ダウンロードしたファイルを読込み、
実行関数を記述するだけです。
1 2 3 4 5 6 7 | <script src="jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script> |
クリッカブル・マップは、オリジナルの画像サイズで作成し、
その後CSS等で、img タグに対して100％なり可変するように変更いたします。
始めに100％指定してから、クリッカブル・マップを作ってしまうと、
可変した際、正確なエリアとはなりませんので、ご注意ください。
2015年11月5日 追記
まず、スクリプトや要素にサイズ指定をしない状態で、
HTMLに画像を設置し、クリッカブル・マップを作成してください。
クリックエリアが出来た後、スクリプトファイルを追記し、
画像に対して、可変するよう widthに％指定を記述してください。
「クリッカブル・マップは、オリジナルの画像サイズで作成し、
その後CSS等で、img タグに対して100％なり可変するように変更いたします。
始めに100％指定してから、クリッカブル・マップを作ってしまうと、
可変した際、正確なエリアとはなりませんので、ご注意ください。」
について、もう少し初心者向きのご説明をいただけると助かります。
うまくできない理由がここにあるような気がいたします。