新宿のWEB制作・システム制作会社エンジョインスタイル

ブログBLOG

クリッカブル_マップ_タブ

レスポンシブのクリッカブルマップには、「jQuery RWD Image Maps」が便利!

2018.06.29

レスポンシブのクリッカブルには、「jQuery RWD Image Maps」が便利!

クリッカブル_マップ_タブ2

Web制作をしていると、たまに必要になるのが、クリッカブルマップですよね。画像に複数のリンクを埋め込むのに便利です。jQueryとプラグインのjsファイルを読み込むだけで簡単に設置できます。下記のページが参考になるかと思います。



【jQuery RWD Image Maps】レスポンシブサイトでイメージマップ(クリッカブルマップ)を使えるjQueryプラグイン



クリッカブル_マップ_タブ3

ただ、このプラグインで1点だけ問題が発生するケースがあります。それは、



複数のクリッカブルマップをタブ機能を使って切り替える場合



です。このケースでは、一部クリッカブル機能が効かなくなります。そんな時は下記のサイトが参考になります。



クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件



タブ切り替え関数のコールバックに



function(){$(window).resize();}



を記載することで正しく動作するようになります。ちょっとしたことですが、なかなか気づきにくい点ですので、つまづかないようにしたいものですね。