質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1502閲覧

javascriptで画像のポジション変更をするとき、一回目がうまくいかない

tuna032

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/25 02:44

一枚の日本地図を用意して、たとえば東京の「地図」をクリックすると、東京の場所にポインターを置き、中央に表示するようにしました。
しかし最初の一回目(キャッシュがないとき?)は、画像は表示されるのですが、ポインターの位置まで移動してくれません。何度か「地図」をクリックするとうまく表示されます。
これを改善するにはどうしたらよいでしょうか?
他にも改善点ありましたら教えていただけると幸いです。よろしくお願いいたします。

<!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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

画像の読み込みは非同期ですので、読み込み中も後続の処理が行われます。読み込みが完了していない段階でwidthやheightを読もうとして、適切な値が得られていないと思われます。

何度か「地図」をクリックするとうまく表示されます。

これは、画像の読み込みが完了した後にクリックしたからでしょう。

つまり、imgのonloadまで待つ、あるいは読み込むものが複数あるので$.whenを使うなどして、後続の処理を読み込み完了まで遅らせるという対応をすることとなります。

マーカーが表示エリアの中心で固定なのであれば、待つのは地図の読み込み完了だけでも十分かもしれません。

JavaScript

1$(".xmap").click(function(e){ 2 //画像の読み込み開始 3 var map = $("<img class='map'>").attr("src", "http://www.dotup.org/uploda/www.dotup.org1014174.jpg"); 4 var pointer = $("<img class='pointer'>").attr("src", "http://www.dotup.org/uploda/www.dotup.org1014165.png"); 5 6 map.on("load", function() { //地図の読み込みが終わってから処理 7 //thisが.mapになるので、以後clickされた.xmapへの参照はevent.currentTargetを使う 8 var ximg = $(e.currentTarget).prev().prev(); 9 ximg.empty().append(map, pointer); 10 11 var dth = ximg.height(); 12 var dtw = ximg.width(); 13 14 var pid = $(e.currentTarget).parent("dl").attr("id"); 15 var ppt = now[pid]["pt"]; 16 var ppl = now[pid]["pl"]; 17 18 ximg.children(".pointer").css("margin-top", ppt + "px"); 19 ximg.children(".pointer").css("margin-left", ppl + "px"); 20 21 var wwc = dtw / 2; 22 var whc = dth / 2; 23 24 var pl = ppl - wwc; 25 var pt = ppt - whc; 26 27 var iw = ximg.children(".map").width(); 28 var ih = ximg.children(".map").height(); 29 30 if (pl < 0) pl = 0; 31 if (pt < 0) pt = 0; 32 33 if (pl > iw - dtw) pl = iw - dtw; 34 if (pt > ih - dth) pt = ih - dth; 35 36 ximg.children(".map").css("top", "-" + pt + "px"); 37 ximg.children(".map").css("left", "-" + pl + "px"); 38 ximg.children(".pointer").css("top", "-" + pt + "px"); 39 ximg.children(".pointer").css("left", "-" + pl + "px"); 40 }); 41});

投稿2016/09/25 03:50

sii_side

総合スコア849

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tuna032

2016/09/25 04:14

できました!ご丁寧にありがとうございます。とても悩んでいたので助かりました。また何かありましたら、よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問