エレベーターが止まり、階段で上り下りすることになりました。
6700か所程度止まったようですね。
やっぱり高層ビルは大変だったようですね。
本題です。今更なのですが
ホームページをスマホに対応させるため
レスポンシブページに変更中に
どうしてもイメージマップがスマホで見ると
ずれてしまい困っていました。

元代々木町をクリックしたいのですが右下の
青い線のところにずれています。
どうにかできないかと検索していたところ
プラグインがあるとのことで
使ってみました。
jQuery-rwdImageMaps
https://github.com/stowball/jQuery-rwdImageMaps最初は、直接HPに書き込んでみましたが、
上手くいかず、jsファイルが既にあるので
そこに書き込みすると上手くいきました。

元代々木町の上が青い線で囲われクリックできる
ようになりました。
私は、全くの素人ですので、原因は分かりませんが
恐らく自社のHPの中に置いているフォルダーの指定が、
間違っていたのではないかと思います。
私と同じように既にイメージマップは作っている方の
参考になればいいのですが、
1、上記
jQuery-rwdImageMaps
からjquery.rwdImageMaps.js 又は
jquery.rwdImageMaps.min.js を開き
jsファイルに書き込み、保存。
ちなみに私は下のmin.jsの方を使いました。
jQueryもJavaSciptです。
2、さらにjsファイルに 下記を追加
$(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); });
usemapのところを特定のマップだけ適用する場合はid指定等するようですが
id指定すると上手くいかず、イメージマップも1ヶ所だけなので
そのままusemapにしたところエリアのずれも治り
きちんと表示されました。
HTMLは、すでにイメージマップを作っていたので
今回は何も変更なしです。
新しく作られる方は、<img src の中に usemap="〇〇〇"
があれば大丈夫のようです。
なお、上の"〇〇〇"はマップにつけた名前です。
今回は、何も変更するところなく
jsファイルに1、2、の2つのプログラムを追加(コピペ)するだけで
出来ました。
と言っても、直接書き込みで手間取りましたが・・・。
自身の備忘録です。
代々木上原、代々木八幡、代々木公園周辺での
賃貸のお部屋探しはウェルサイドホーム






