イメージマップのレスポンシブ

Question

http://timecoupon.info/sports3.phpこちらのページを作成しているのですが、地図を押した時、スマホで見た際に動作が確認できない場合があります。（レスポンシブ用のJQueryは確認済み）リロードするとうまくいくのですが、、何が原因でしょうかまたPCで見た時はいい感じなのですが、スマホだと画像のサイズが小さく使い勝手は悪く感じます。画像の大きさをスマホの時に大きくし、かつ座標がずれないようにするにはどうすればいいでしょうか。

Accepted Answer

http://timecoupon.info/sports3.phpよろしくお願いします。状況としては、沖縄や北海道を押した後、座標がうまく読み込めなくなるようです。

Answer

ECマスターズの田中です。HTML内で各画像の大きさが指定されていない中で$(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); });（改行略）としているため、画像を読み込まず、画像のサイズが確定してない中でクリッカブルマップの座標再計算を行ってしまい、座標が全て０になって動作しなくなるケースがあるようです。$(document).ready(を$(window).load(に差し替えていただくか、各画像にサイズをご指定いただいた上で、再度動作の確認をお願いします。スマートフォンで閲覧時に画像を大きく、とのことですが、左右スクロールが必要なほど大きくしてしまうと、逆に利便性を欠くことになると思います。画面幅内におさまる範囲で大きくされる場合は、各画像ファイルの左右の余白をなるべく削っていただいた上で、<map>タグの座標の再計算を行っていただきますようお願いします。（まずは１つの画像ファイルに対してお試しください）

Answer

ご回答ありがとうございます。$(window).load(にしましたが、うまく作動しません。

Answer

ECマスターズの田中です。私にてソースを確認したのですが、未だに $(document).ready( のままになっているようです。変更された後、元に戻されたということでしょうか。私にて、$(window).load( に変更されたページを確認させていただくことはできますでしょうか。

Answer

ECマスターズの田中です。ご変更ありがとうございます。動作を確認したところ、hide('slow'); によって隠され、width・heightが0になった状態でマップ座標の再計算が行われた結果、全ての座標が０になっている可能性が高いです。$(window).load( を $(document).ready( に戻していただき、//RWD Image Mapsを適用部分のコードを、同じ<script>タグの先頭、つまり//地図の表示・非表示イベントの直前に移動していただき、改めて動作をご確認いただけますでしょうか。

イメージマップのレスポンシブ

カテゴリーから探す