jQuery RWD Image Mapsで、クリッカブルエリアがずれる

レスポンシブサイトでクリッカブルマップを使用すると必ず遭遇する問題、それは画像のサイズが変更になることでクリッカブルなエリアがずれてしまうという不具合。

クリッカブルマップのエリアはピクセルで指定するので、%などで指定し、画面サイズによって画像のサイズが変わってしまうと都合が悪いのですね。

で、ググると良く出てくるのが、jQueryのプラグイン「jquery.rwdImageMaps.js」を使うと簡単に解決できますよ、というもの。

説明を読むと、プラグインを読み込んで適用させれば良いだけっぽくて、なるほどコレなら簡単だ、と思うわけですよ。

しかし、僕はコレを入れたことで解決どころか問題が悪化してしまいました。（笑）
元々位置が合っていた、初期設定のサイズですら、クリッカブルな位置がずれてしまうという。。。

■原因

この「jquery.rwdImageMaps.js」は、htmlのimgタグにwidth、heightのピクセル数を指定する必要があるようです。
指定するピクセル数は、クリッカブルマップの範囲指定をしたときのサイズ。
要するにこの幅と高さを基準値として、画像のサイズが変わったときにエリアの位置を比率に応じてずらしてくれるという仕組みなようです。

僕はこの設定をしていなかったのですね。
だって、レスポンシブだもん。CSSで設定してあるんだもん。HTMLの方には書かないよ。
まぁ、しかし必須ならば仕方が無いので、記述を追加します。

■もう一工夫必要

レスポンシブサイトで画像を入れる時って、主に横幅を%で指定して、縦は元の画像の縦横比に任せてしまう（特に指定しない）という事が多くないですか？

しかし、imgタグにheightをピクセル数で指定してあると、縦サイズが固定になってしまい、横が伸び縮みするのに応じて、縦横比が変わってしまうのですね。

コレを解決するためにもう一工夫必要。
CSSではheightをautoに設定します。
これでimgタグに書いたピクセル数での設定はキャンセルされます。

■まとめ
jquery.rwdImageMaps.jsでのクリッカブルマップのレスポンシブ対応をまとめると、

１．jquery.rwdImageMaps.jsを読み込んで、対応したい画像に適用する
２．imgタグにwidthとheightをピクセル数で指定する（クリッカブルマップを設定したときの縦横サイズで）
３．css側でwidthとheightを指定する。
　widthに応じてheightが自動調整されるようにしたい場合はautoを指定する。

となります。