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

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(
に差し替えていただくか、各画像にサイズをご指定いただいた上で、
再度動作の確認をお願いします。

スマートフォンで閲覧時に画像を大きく、とのことですが、
左右スクロールが必要なほど大きくしてしまうと、逆に利便性を欠くことになると思います。

画面幅内におさまる範囲で大きくされる場合は、
各画像ファイルの左右の余白をなるべく削っていただいた上で、
タグの座標の再計算を行っていただきますようお願いします。
（まずは１つの画像ファイルに対してお試しください）

Answer

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

Answer

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

Answer

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