- 締切済み
画像サイズの読み込み
お世話になります。 javascriptで画像サイズを取得し、そのサイズに合わせてimgタグhtmlを吐き出すという処理を行っています。 ------------------ var i = new Image(); //**step1 i.src = strPath; //**step2 hhh = i.height; //**step3 document.getElementById('aaa').innerHTML ='<img src="" id="backImage" height="' + hhh + '"></img>'; ------------------ 上記において、**step2と**step3の間に、alert文を入れると、うまく画像サイズを取得できるのですが、alertがないと、hhh = 0 になってしまいます。 （うまくいくケースは以下↓） ------------------ var i = new Image(); //**step1 i.src = strPath; //**step2 alert("sdf"); hhh = i.height; //**step3 document.getElementById('aaa').innerHTML ='<img src="" id="backImage" height="' + hhh + '"></img>'; ------------------ なぜでしょうか・・・かれこれ数時間悩んでいろいろ試してみましたが、原因がサッパリわかりません。 ちなみに、hhh = 0 になるのは、最初の１回だけ、二度目にここを通ると、alertがなくてもhhhには正しく数値がセットされます。 どなたか、何かヒントになるようなことでもあれば、おしえてください。よろしくおねがいします。
- upperground
- お礼率62% (30/48)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
/*==appendImage======= i = new Image(); i.src = "gray.bmp"; i.onload = function(){ alert("width="+this.width+" height="+this.height); document.body.appendChild(this); } */ /*==innerHTML==*/ i = new Image(); i.src = "gray.bmp"; i.onload = function(){ alert("width="+this.width+" height="+this.height); document.body.innerHTML = '<img src="' + this.src + '">' }
- arenani_sorenani
- ベストアンサー率73% (58/79)
書いてあったソースをそのまま移して書きましたが 変だな思っていたところがあります。 <img src='' id='backImage' height='" + hhh + "' /> srcのところにImagaeのパス指定がないので別の画像を表示するのかと 思いましたが、単なる記述もれでしょうか？ もしiと同じパスなら str="<img src='"+strPath+"' id='backImage' height='" + hhh + "' />"; として見て下さい。
補足
ご返信ありがとうございます。 > もしiと同じパスなら > str="<img src='"+strPath+"' id='backImage' height='" + hhh + "' />"; > として見て下さい。 おっしゃるとおりのような気がします。そのようにしてみました。 ここへきて、詳しい説明をしても遅いのですが(すみません)、やはり書いておかないといけない気がします。 このjavascriptは、jsファイルとして単独で存在しており、画面表示はphp＋htmlで行っています。 表示された画面上のボタンをクリックたびに、あらかじめサーバーに用意されている画像や動画ファイルを表示する、という仕組みです。（画面のボタンをクリックするたびに、onclickでjsファイルの関数を呼び出す） ボタンをクリックするたびに、表示される画像がパッパッとかわっていくわけですが、その画像を表示させる領域の大きさが固定されているため、その領域より大きな画像はそれに合わせて縮小させようとしています。そのため、imageオブジェクトの.heightや.widthで幅・高さを取得して、htmlではきだすときにwidth="**" やheight="**"を指定しようとしています。 そして現在の問題が、imageオブジェクトから画像サイズを取得しようとすると、ゼロになってしまう(alertで一旦とめれば、正常に取得できる)という状況です・・・。 （今更ながらの説明で、すみません） 下記抜粋ソースを、alertで処理の流れを追うと、 point-A → point-C → point-D の順にいっており、point-Bには入っていませんでした。そして画面には、サイズ未調整の画像がそのまま表示され、htmlのテーブルがこわれています。 どこかおかしいことを書いていると思うのですが、ご指摘いただければ助かります。よろしくお願いいたします。 if(!document.backImage) { var i = new Image(); i.src = strPath ; var strhtml = '<img src="' + i.src + '" id="backImage" style="z-index:0; "></img>'; document.getElementById("showMedia").innerHTML = strhtml; // ** point-A ** i.onload = function() { // ** point-B ** var strheight = i.height; var strwidth = i.width; strhtml = '<img src="' + i.src + '" id="backImage" height="' + strheight + '" width="' + strwidth + '" style="z-index:0; "></img>'; if(strheight > strwidth) { if(strheight > 350) { strhtml ='<img src="' + i.src + '" id="backImage" height="350" style="z-index:0; "></img>'; } } else if(strheight < strwidth) { if(strwidth > 425) { strhtml ='<img src="' + i.src + '" id="backImage" width="425" style="z-index:0; "></img>'; } } else { if(strheight > 350) { strhtml ='<img src="' + i.src + '" id="backImage" height="350" style="z-index:0; "></img>'; } } document.getElementById("showMedia").innerHTML = strhtml; } // ** point-C ** } // ** point-D ** document.getElementById("backImage").src = strPath ;
- arenani_sorenani
- ベストアンサー率73% (58/79)
原因はイメージがロードされる前にstep3が実行されるからのように思えます alert()をいれるとstep3へ行く前にロードが完了する時間の余裕ができるから。 なので ＃1の方が書かれてるように画像のロードを引き金にして step3へ移行するようにすればいいかと思います。 例） <script type="text/javascript"> var i = new Image(); i.src = strPath; i.onload=function(){ hhh = i.height; str="<img src='' id='backImage' height='" + hhh + "' />"; document.getElementById('aaa').innerHTML =str; } </script> <body> <div id="aaa"> </div> </body>
補足
arenani_sorenaniさん、詳しい解説、どうもありがとうございました。さっそくやってみたのですが・・・ var i = new Image(); i.src = strPath; i.onload=function(){ // ** step1 var hhh = i.height; str="<img src='' id='backImage' height='" + hhh + "' />"; document.getElementById('aaa').innerHTML =str; } とコーディングしているのですが、** step1 へ処理が移ることがありません・・・function(){}に入ることなく次の処理へ進んでしまいます。(画像が表示されないままプログラムが実行される) ちなみに、i.srcをalertで確認してみても、正しいURLがセットされています。 たびたび申し訳ありませんが、どこかおかしい部分があればご指摘ねがえませんでしょうか。 よろしくお願いいたします。
complete http://www.openspc2.org/JavaScript/ref/image/complete.htm onLoad http://www.openspc2.org/JavaScript/ref/event/onLoad.htm
お礼
ご返信、ありがとうございます。 まさにこんなかんじを求めていました。
関連するQ&A
- ロールオーバーで画像を先読みする方法
スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか？ お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }
- ベストアンサー
- JavaScript
- jquery cycleで画像リサイズ
jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください！！
- ベストアンサー
- JavaScript
- 画像の大きさ
文字の横にちょっとした目印に1文字の大きさ程度の画像を表示させたいのですが、IEで文字のサイズを変更すると文字と画像がアンバランスになってしまいます。 文字の大きさを固定したくないと思っています。 単純に考えて、下のようなことができればと思っていますが、無理だと思っています。（???が埋まれば出来そうですが・・・） 参考になるサイトなどがありましたら教えてください。 <body> <img id="img" src="abc.gif" width="15" height="15" border="0" style="float:left;"><span>aaaaa</span> </body> <script> a = new Array("0.8","1.0","1.2"); if(??? == ???){i = 0;} else if(??? == ???){i = 1;} else if(??? == ???){i = 2;} document.getElementById("img").setAttribute('width',15*a[i]); document.getElementById("img").setAttribute('height',15*a[i]); </script>
- ベストアンサー
- JavaScript
- 画像のサイズが取得できません
Internet Explorer の右クリックメニュー拡張用スクリプトを作っています。 画像上で右クリックすると画像のサイズが表示されるようにしたいのですが、うまくいきません。 <script type = "text/javascript"> var parentWindow = window.menuArguments; var eventSource = parentWindow.event.srcElement; var tagName = eventSource.tagName.toUpperCase(); var URL; if (tagName == "IMG") { URL = eventSource.src; var newImg = new Image(); newImg.src = URL; alert("画像のサイズは " + newImg.width + "×" + newImg.height); }; </script> これにより、たとえばこのOKWaveのページの左上にあるロゴは 画像のサイズは 220 × 54 と表示されますが、 たとえば http://goo.gl/I9bEQf では 画像のサイズは 0 × 0 となってしまいます。 なぜでしょうか？ 原因と解決法を教えていただけると嬉しいです。
- 締切済み
- JavaScript
- Javascript画像切り替えIEでしか動かない
Javascriptで画像を切り替えています。 IEでは動くのですが他のブラウザだと動きません。 FirefoxやChromeは何か特殊なのでしょうか？ わかる人いたら教えてください。 <script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">
- ベストアンサー
- JavaScript
- 画像メニューの開閉
JavaScriptで画像メニューの開閉を行いたいのですが、 うまく動きません。 「aaa」が閉じていた場合には「aaa」を開くまではできたのですが、 「bbb」を閉じるという１行を追加したら動かなくなりました。 どなたかご教授願います。 【JavaScript】 function showSubmenu01() { if(document.getElementById("aaaSub").innerHTML == '') document.getElementById("aaaSub").innerHTML = '<img src="aaa.gif">'; document.getElementById("bbbSub").innerHTML = ''; else document.getElementById("aaaSub").innerHTML = ''; } 【HTMLソース】 <ul> <li><a href="#" onClick="showSubmenu01()"><img src="img/menu_aaa.gif" /></a></li> <li><div id="aaaSub"></div></li> <li><div id="bbbSub"><img src="bbb.gif" /></div></li> </ul>
- ベストアンサー
- JavaScript
- 画像の不完全な読み込みについて
ロールオーバー(アウト)で画像切り替えをしています。 ＭacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。 *****外部jsファイル******** if(document.images){ var hoge_over=new Image(70,162); hoge_over.src="./hoge.gif"; var hoge_out=new Image(70,162); hoge_out.src="./hoge2.gif"; } function xOver(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_over.src"); } } function xOut(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_out.src"); } } *****htmlファイル******** <a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self"> <IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a> ************************** 問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。
- 締切済み
- JavaScript
- JAVASCRIPTの接続子について
始めまして、JAVASCRIPPTで以下の様なコードを書いているのですが 'img' + page;の部分でエラーになってしまいます。どなたか正しい書き方を御享受下さい。 //画像を最初にキャッシュする var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); var img4 = new Image(); var page = 0; img0 = "image/ginotitle.JPG"; img1 = "image/Gino1page.JPG"; img2 = "image/Gino2page.JPG"; img3 = "image/Gino3page.JPG"; function moverts(){ switch(window.event.button) { case 1://************** 左クリック ********************************************* page = page - 1 ; //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; case 2://************** 右クリック ********************************************* page = page + 1 ; alert( = sns ); //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; } }
- 締切済み
- その他([技術者向] コンピューター)
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- 画像切り替える&画像何千枚でもコード増やさない方法
html上に表示させた画像をクリックすると、画像を切り替えるプログラムを作りたいのですが、 うまく動作しません。 １つ目の質問は、 document.images[]の方法もありますが、正しくなく互換がないそうなので使いたくありません。 document.getElementById()で画像を切り替えるにはどうしたらいいのでしょうか？ ２つ目の質問ですが、 このプログラムは6枚の画像が切換えの対象になっていますが、 これが300枚とかになるとプログラムが増えて大変です。 GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; という風にしているところを var GAZO = new Array(); for(n=0; n<6; n++){ GAZO[n] = new Image(50,50); GAZO[n].src = "n.jpg"; } という風にすればできると思ったのですが、できませんでした。 n.jpgが""で囲まれて変数のnがただの文字列と見られているのかもと思い、 'GAZO[n] = new Image(50,50); GAZO[n].src = '+'"'+n+'.jpg'+'"'; このようにしてみましたがダメでした。 画像の枚数が何千枚になってもプログラムが増えない方法はありますか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript"> <!-- var Bifor = new Array(); Bifor[0] = new Image(50,50); Bifor[0].src = "befor0.jpg"; Bifor[1] = new Image(50,50); Bifor[1].src = "befor1.jpg"; Bifor[2] = new Image(50,50); Bifor[2].src = "befor2.jpg"; Bifor[3] = new Image(50,50); Bifor[3].src = "befor3.jpg"; Bifor[4] = new Image(50,50); Bifor[4].src = "befor4.jpg"; Bifor[5] = new Image(50,50); Bifor[5].src = "befor5.jpg"; function first(){ for(i=0; i<6; i++){ 'document.getElementById("after' + i + '").src' = Bifor[i].src; } } var GAZO = new Array(); GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; GAZO[1] = new Image(50,50); GAZO[1].src = "1.jpg"; GAZO[2] = new Image(50,50); GAZO[2].src = "2.jpg"; GAZO[3] = new Image(50,50); GAZO[3].src = "3.jpg"; GAZO[4] = new Image(50,50); GAZO[4].src = "4.jpg"; GAZO[5] = new Image(50,50); GAZO[5].src = "5.jpg"; function change(m){ 'document.getElementById("after' + m + '").src' = GAZO[m].src; } //--> </script> </head> <body onload="first()"> <form name="jirei" action="#"> //actionは必須。しかしに他に入れるものがないので便利な#を入れる <GAZO src="title.jpg"> <table> <tr> <td><img src="befor0.jpg" width="50" height="50" id="after0" onclick="change(0)"></td> <td><img src="befor1.jpg" width="50" height="50" id="after1" onclick="change(1)"></td> <td><img src="befor2.jpg" width="50" height="50" id="after2" onclick="change(2)"></td> </tr> <tr> <td><img src="befor3.jpg" width="50" height="50" id="after3" onclick="change(3)"></td> <td><img src="befor4.jpg" width="50" height="50" id="after4" onclick="change(4)"></td> <td><img src="befor5.jpg" width="50" height="50" id="after5" onclick="change(5)"></td> </tr> </table> <input type="button" value="元に戻す" onclick="first()"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
質問者のくせに、返信が大変遅くなり申し訳ございません。 nonameさん、ありがとうございます。 が、、、すみません、appendImageの部分、ちょっと理解できず・・（知識不足ですみません。）これはどういう処理をおこなっているのでしょうか、教えていただけると助かります。