レスポンシブデザインでイメージマップ

質問

レスポンシブデザインでウェブサイトを制作しています。
その中で、イメージマップ（クリッカブルマップ）を使おうとしているのですが、スマホ縦で表示しますと、画像の大きさが変わりますので、リンクエリアがずれます。
そこで、jQuery RWD Image Mapsというものを見つけましたので、これを取り入れることにしました。
https://github.com/stowball/jQuery-rwdImageMaps

が、うまく動きません。
試しに、シンプルなレスポンシブデザインのサンプルページがあったので、そのソースを拝借して、そこでこのjQueryがうまく動作するかテストしてみました。

HTML
http://wakabaya.main.jp/example-09.html

CSS
http://wakabaya.main.jp/responsive-09.css

jQuery
http://wakabaya.main.jp/js/jquery.rwdImageMaps.min.js

シンプルなサイトですので、何か他のjQueryやスタイルシートが干渉するということもないはずなのですが、やはり動きません。
ロゴ画像のSのあたりをリンクエリアとして指定し、パソコンではそこがリンクエリアとなっていますが、スマホ縦ではロゴ画像のynの下あたりにリンクエリアがきています。

jQueryを使うのは今回が初めてで、何か、初歩的なミスをしているのではないか…、と思うのですが、その原因が見つけきれず、こちらで質問させていただきました。
どういった原因、解決策が考えられるでしょうか。
よろしくお願いします。

回答No.1

DrFell · ベストアンサー

http://wakabaya.main.jp/js/jquery.rwdImageMaps.min.js
これがどうみてもjsでははくhtml。

jquery.rwdImageMaps.min.js の確認をお薦めします。

お礼

ありがとうございます！
アップするべきものを誤っておりました。凡ミスです。
これですべて、解決しました。
ありがとうございました。