エレベーターが止まり、階段で上り下りすることになりました。
６７００か所程度止まったようですね。
やっぱり高層ビルは大変だったようですね。
本題です。今更なのですが
ホームページをスマホに対応させるため
レスポンシブページに変更中に
どうしてもイメージマップがスマホで見ると
ずれてしまい困っていました。
元代々木町をクリックしたいのですが右下の
青い線のところにずれています。
どうにかできないかと検索していたところ
プラグインがあるとのことで
使ってみました。
jQuery-rwdImageMaps
https://github.com/stowball/jQuery-rwdImageMaps最初は、直接ＨＰに書き込んでみましたが、
上手くいかず、jsファイルが既にあるので
そこに書き込みすると上手くいきました。
元代々木町の上が青い線で囲われクリックできる
ようになりました。
私は、全くの素人ですので、原因は分かりませんが
恐らく自社のＨＰの中に置いているフォルダーの指定が、
間違っていたのではないかと思います。
私と同じように既にイメージマップは作っている方の
参考になればいいのですが、
１、上記
jQuery-rwdImageMaps
からjquery.rwdImageMaps.js 又は
jquery.rwdImageMaps.min.js を開き
ｊｓファイルに書き込み、保存。
ちなみに私は下のmin.jsの方を使いました。
ｊＱｕｅｒｙもJavaSciptです。
２、さらにjsファイルに 下記を追加
$(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); });
usemapのところを特定のマップだけ適用する場合はid指定等するようですが
id指定すると上手くいかず、イメージマップも１ヶ所だけなので
そのままusemapにしたところエリアのずれも治り
きちんと表示されました。
ＨＴＭＬは、すでにイメージマップを作っていたので
今回は何も変更なしです。
新しく作られる方は、<img src の中に usemap="〇〇〇"
があれば大丈夫のようです。
なお、上の"〇〇〇"はマップにつけた名前です。
今回は、何も変更するところなく
jsファイルに１、２、の２つのプログラムを追加（コピペ）するだけで
出来ました。
と言っても、直接書き込みで手間取りましたが・・・。
自身の備忘録です。
代々木上原、代々木八幡、代々木公園周辺での
賃貸のお部屋探しはウェルサイドホーム
