レスポンシブサイトでイメージマップ(imgmap)を利用するときにrwdImageMaps.jsを使うけど

jquery.rwdImageMaps.min.jsお世話になってみました。

これで後のレスポンシブサイトの大きな問題はTableだけなんじゃないかとか、そうじゃないとか。

ただ、こちらのJs利用する上で小さな落とし穴にはまりました。
レスポンシブコーディングをDreamweaver上で行っていると、プレビュー自体もレスポンシブに画像が伸びる。

自分がやりやすい環境で作業していると画像の本当のサイズじゃない状態になっていることが殆どですが、そこを意識せずにイメージマップを作成して上記Jsを利用すると、あれ!?!?ズレてるし!つかえねぇし!ってなる。

恐らくJsの仕組みとして本当の画像サイズに対して、自分で設定したイメージマップをがっちゃんこしちゃうのでプレビュー状態だと画像サイズが嘘×イメージマップはその見た目のまま正解として判断されるため。

なので面倒だけど、画像のサイズをとりあえず本当のサイズに指定した状態でイメージマップを作る必要がありそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です