一枚の日本地図を用意して、たとえば東京の「地図」をクリックすると、東京の場所にポインターを置き、中央に表示するようにしました。
しかし最初の一回目(キャッシュがないとき?)は、画像は表示されるのですが、ポインターの位置まで移動してくれません。何度か「地図」をクリックするとうまく表示されます。
これを改善するにはどうしたらよいでしょうか?
他にも改善点ありましたら教えていただけると幸いです。よろしくお願いいたします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <title>jsテスト</title> <style type="text/css"> body{ width:500px; } .dl{ background-color:#f5f5f5; border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd; padding:10px; margin-bottom:40px; } .dl dt{ padding-bottom:10px; border-bottom: solid 1px #dddddd; } .dl dd{ padding:10px 0; margin:0px; border-top: solid 1px #dddddd; } .dl dt+dd{ border-top: solid 0px; } .dl .ximg{ height:360px; overflow: hidden; margin:10px 0; padding:0px; position:relative; } .map{ position:absolute; top:0px; left:0px; } .pointer{ position:absolute; top:0px; left:0px; } .name,.xmap{ color: #64a0a0; cursor: pointer; cursor: hand; } </style> <script> //xmap,nameをオンマウスで背景色を変更する $(function(){ $(".xmap , .name").hover(function(e){ $(this).css("background-color","#e7e4db"); },function(){ $(this).css("background-color","#f2f2f2"); }); }); //オブジェクト設定 function cc(_pict,_pl,_pt){ this.pict = _pict; this.pl = _pl; this.pt = _pt; } //オブジェクト作成。画像url,width,height var now = []; now[0] = new cc(1014180,750,400); now[1] = new cc(1014181,250,150); //nameクリックで画像を表示する $(function(){ $(".name").click(function(e){ var pid = $(this).parent("dl").attr("id"); $(this).siblings(".ximg").html('<img src="http://www.dotup.org/uploda/www.dotup.org' +now[pid]["pict"]+ '.jpg">'); }); }); //xmapクリックで地図を表示する $(function(){ $(".xmap").click(function(e){ $(this).siblings(".ximg").html('<img src="http://www.dotup.org/uploda/www.dotup.org1014174.jpg" class="map"><img src="http://www.dotup.org/uploda/www.dotup.org1014165.png" class="pointer">'); //.ximgのサイズ取得 var dth = $(".ximg").height(); var dtw = $(".ximg").width(); //this id、ポジション取得 var pid = $(this).parent("dl").attr("id"); var ppt = now[pid]["pt"]; var ppl = now[pid]["pl"]; //pointerアイコンの座標設定 $(this).siblings(".ximg").children(".pointer").css("margin-top", ppt + "px"); $(this).siblings(".ximg").children(".pointer").css("margin-left", ppl + "px"); //表示領域の中心を出す var wwc = dtw / 2; var whc = dth / 2; //中心を基準としたポジションを出す var pl = ppl - wwc; var pt = ppt - whc; //画像サイズを取得 var iw = $(".map").width(); var ih = $(".map").height(); //上はみ出し制御 if (pl < 0) pl = 0; if (pt < 0) pt = 0; //下はみ出し制御 if (pl > iw - dtw) pl = iw - dtw; if (pt > ih - dth) pt = ih - dth; //ポジション設定 $(this).siblings(".ximg").children(".map").css("top", "-" + pt + "px"); $(this).siblings(".ximg").children(".map").css("left", "-" + pl + "px"); $(this).siblings(".ximg").children(".pointer").css("top", "-" + pt + "px"); $(this).siblings(".ximg").children(".pointer").css("left", "-" + pl + "px"); }); }); </script> </head> <body> <dl class="dl" id="0"> <dt>東京</dt> <dd class="ximg">ここに画像が出ます</dt> <dd class="name">イメージ画像</dd> <dd class="xmap">地図</dd> <dd>説明</dd> </dl> <dl class="dl" id="1"> <dt>北海道</dt> <dd class="ximg">ここに画像が出ます</dt> <dd class="name">イメージ画像</dd> <dd class="xmap">地図</dd> <dd>説明</dd> </dl> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/25 04:14