こんにちは、システムの渋谷です。
画像の一部分の領域からリンクを張る、クリッカブルマップという便利な機能があるのですが、レスポンシブで画像のサイズが変わってもリンクの領域は自動的に変わらないため、ブラウザのサイズ変更に応じてリンクの領域をjavascriptで変えてあげる必要があります。
その作業を簡単に行ってくれるResponsive Image Maps jQuery Pluginという著名なjQuery Pluginがあるので、通常これを使ってクリッカブルマップのレスポンシブ対応を実現しています。
使い方も簡単で、「jquery.rwdImageMaps.min.js」を読み込んで
$(‘img[usemap]’).rwdImageMaps();
とするだけでOK!
まったく簡単だ！
と思ってたら、なぜかクリッカブルマップが正常に動いていない案件が……
やせいの バグが とびだしてきた！
症状としては、
- タブを使って複数のクリッカブルマップを切り替える仕様
- クリッカブルマップを切り替えるとリンク領域が消えている
- ブラウザサイズを変更するとなぜか復活する
いろいろ適当にいじってみても正常に動作しないので、泣きながら（というほどでもないですが）ソースを読んでみました。
画像ロード時にimg要素の大きさを取得して、それをもとにレスポンシブで変更された画像の大きさでのリンク領域の計算を行っているようです。
つまり…タブで切り替える仕様などで、rwdImageMaps()実行時にクリッカブルマップが非表示の状態になっていると画像の幅と高さが「0」とされてしまうので、リンク領域も出なくなってしまう、と。
それで解決方法は？
これを解決するには、画像を表示するタイミングでサイズを取得してあげるようにすればいいのですが、プラグインの中身に手を入れると管理が面倒になるので今回は「ブラウザサイズを変更するとなぜか復活する」点に注目して、タブの切り替え時にresizeイベントを発火させることで解決することができました。
コードとしては、タブ切り替え時のslideDown等の関数のコールバックに
function(){$(window).resize();}
を指定してあげればいいだけです。
rwdImageMaps自体が結構長い間メンテナンスされておらず、最新のjQueryで廃止された関数を使っていたりするのでいろいろ書き換えたいところがあるんですけどね。