複数画像を最初に読み込んでそれを切り替える方法
- IEの全画面表示で表示する際、画像の読み込みの為にメニューが出てしまう問題があります。解決方法として、最初に全ての画像を読み込んでから切り替える方法があります。
- 以下のソースコードは、HTML＋JavaScript＋CSSを使用して披露宴のスタッフロールを作成する際に、最初に画像を全て読み込んでから切り替える方法を示しています。
- 具体的なソースコードとして、画像を配列に格納し、タイマーを使用して一定時間ごとに画像を切り替える方法が記述されています。
- ベストアンサー
複数画像を最初に読み込んでそれを切り替える方法
お世話になります。 披露宴のスタッフロールをHTML＋JavaScript＋CSSで作りたいです。 IEの全画面表示で表示するのですが、画像を切り替える際、 画像の読み込みの為に右上にメニューが１秒ほど出てしまいます。 これを防ぐためには最初に画像を全て読み込んで、 読み込んだ画像の切り替える方法にしないといけないようですが、 方法がわかりません。(別の解決方でもいいです) 今のソースは以下のようにしています。 <HTML> <HEAD> <TITLE>test</TITLE> <style type="text/css"> </style> <script language="JavaScript"> <!-- var TIMER="10000"; //スライド切替時間(1秒=1000) var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1) var count="0"; var pict = new Array(3); pict[0] = "./SunSet.jpg"; // この画像はBODYの部分にも指定し、JavaScriptからは表示されない pict[1] = "./Winter.jpg"; pict[2] = "./BlueHills.jpg"; function TimerStart(){ if(TIMER_ID == -1){ TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行 } } function ChangeImg(){ count++; count %= 3; document.body.style.backgroundImage="url(" + pict[count] + ")"; //bodyの背景画像変更(*) } //--> </script> </HEAD> <BODY onload= "TimerStart()" BACKGROUND="./SunSet.jpg" style="background-color:#000000;color:#ffffff;overflow:hidden;background-repeat: no-repeat;background-position: 50% 50%;"> <FONT SIZE=+2> <MARQUEE DIRECTION="UP" LOOP="1" SCROLLAMOUNT="3" height="100%"> Aさん<BR> Bさん<BR> Cさん<BR> </MARQUEE> </BODY> </HTML> よろしくお願いいたします。
- shuhei1031
- お礼率36% (15/41)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
画像の読み込み終了を判定していないわね。 画像が一時領域にあると Imageのcompleteプロパティがtrueになるわ。 あと setAttribute("background", pict[count]) は setAttribute("background", pict[count].src) にしないと画像が背景に反映されないわよ。
その他の回答 (2)
- askaaska
- ベストアンサー率35% (1455/4149)
Win2000+IE6なんて環境は持っていないけど 察するにループの処理が重すぎて さくっとフルスクリーンにならないだけだと思うわ。 ループにインターバルを持たせるとか keyイベントを受けてループを一時停止するとか 上手くいくかわからないけどcompleteの変わりにonloadを試してみるとか してはどお？。
お礼
WindowsXP＋IE6でも同じでした。 フルスクリーンになった後、画像が分かるタイミングの度に メニューバーみたいなのがぴろっとでてきます。 ただ、FireFoxでやってみたらでなかったので、 そっちで行うことにしました。 連絡が遅れてすいませんでした。 ありがとうござました。
- askaaska
- ベストアンサー率35% (1455/4149)
> // この画像はBODYの部分にも指定し、JavaScriptからは表示されない この文言の意味がわからないのでとりあえず気にしないことにして JavaScriptにはImageというオブジェクトがあるの。 こいつに画像を格納できるわ。 配列pictは文字列の配列じゃなくて Imageの配列にしてあげればいいのよ。 srcを指定すると読み込み始めるわ。
補足
以下のようにやったのですが、やっぱり読み込みにいってしまいます。 画像を変更する変更がいけないのだと思いますが、 どのようにすればいいのでしょうか？ <HTML> <HEAD> <TITLE>test</TITLE> <style type="text/css"> </style> <script language="JavaScript"> <!-- var TIMER="10000"; //スライド切替時間(1秒=1000) var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1) var count="0"; //表示画像のカウント var pict_num = 3; //画像の数 var pict = new Array(pict_num); //画像オブジェクトのポインタ配列 var pict_src = new Array(pict_num); //画像のパスの配列 pict_src[0] = "./SunSet.jpg"; //この画像は初期画像なのでHTMLのBODY部分で表示させる pict_src[1] = "./Winter.jpg"; pict_src[2] = "./BlueHills.jpg"; for(i=0; i<pict_num; i++){ pict[i] = new Image(); pict[i].src = pict_src[i]; } function TimerStart(){ if(TIMER_ID == -1){ TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行 } } function ChangeImg(){ count++; count %= 3; // document.body.style.backgroundImage="url(" + pict[count] + ")"; //bodyの背景画像変更 // document.body.style.backgroundImage="url(" + pict[count].src + ")"; //bodyの背景画像変更 document.getElementById("body_id").setAttribute("background", pict[count]); //bodyの背景画像変更 } //--> </script> </HEAD> <BODY id="body_id" onload= "TimerStart()" BACKGROUND="./SunSet.jpg" style="background-color:#000000;color:#ffffff;overflow:hidden;background-repeat: no-repeat;background-position: 50% 50%;"> <FONT SIZE=+2> <MARQUEE DIRECTION="UP" LOOP="1" SCROLLAMOUNT="3" height="100%"> 山田太郎<BR> 小泉純一郎<BR> 小泉今日子<BR> </MARQUEE> </BODY> </HTML>
関連するQ&A
- 背景画像がつられてのびていくのはどうして？
お世話になります。 画像ファイルがno-repeatと指定しているのに bの画像が下だけどんどん長くなっていくのが不思議なんですけど これはどういうことなんでしょうか？ 教えてください。お願いします。 'HTML <div id="1"> <div id="2"> <div id="3"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </div> 'css #1{ width: 900px; margin: 0 auto 0 auto; padding: 0 0 0 0; border-style: none; text-align: left; } #2 { width: 900px; padding: 0 0 0 0; border-style: none; background: #000 url("a.jpg") repeat-y; text-align: left; } #3 { width: 900px; padding: 0 0 0 0; border-style: none; background: url("b.jpg") no-repeat; text-align: left; }
- ベストアンサー
- HTML
- 時間差で画像を動作させたいjavascriput
時間差で画像にあれこれさせる！javascriput (1)HPが開かれたと同時に「wakuwaku.gif」がフェードインし、すぐにフェードアウトさせる。（できれば速度調整できるとうれしいです） ↓ (2)フェードアウト後「ｕｋｉｕｋｉ.gif」を50px下に動かし止める（できれば速度調整できるとうれしいです）。 これと同時にmogemoge028○.jpgをフェードインさせる。 自分では以下まで作成しましたが。setTimeOutのいい使い方や もっと早く動作するのあるだろ！ 等、良案をよろしくお願い致します。 あまり時間が作れなく、基礎等も毎日勉強しているのですがおっつきせん＾＾； もちろん教えて下さったのを元に勉強させていただきたいと思っております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <DIV style="top : 100px;left : 106px; position : absolute; z-index : 2; " id="Layer1"><IMG src="wakuwaku.gif" width="1050" height="610" border="0"></DIV> //画像１つ目 <DIV style="top : 153px;left : 198px; position : absolute; z-index : 3; " id="Layer2"><IMG src="ｕｋｉｕｋｉ.gif" width="445" height="495" border="0"></DIV> //画像２つ目 <DIV style="top : 170px;left : 200px; position : absolute; z-index : 1; " id="Layer3"> <script language="JavaScript" type="text/javascript"> <!-- var randimg = new Array(); var randimg_count = 0; randimg[randimg_count++] = "mogemoge0287.jpg" randimg[randimg_count++] = "mogemoge0288.jpg" randimg[randimg_count++] = "mogemoge0289.jpg" randimg[randimg_count++] = "mogemoge0280.jpg" document.write("<img src=\"" +randimg[Math.floor(Math.random() * randimg.length)]+ "\">"); //--> </script> </DIV>//画像３つ目（ランダム表示） </BODY> </HTML>
- ベストアンサー
- JavaScript
- クリックするたびに画像を変える
初心者なんですが、下記のようなスクリプトを使っています。（これ自体はうまく動作しています。） これはページ内に一つ画像をクリックするたびに別の画像を表示させていくのですが、 二つ並べてみようと試みたのですが、どうもうまくいきません。同じスクリプトの名前なり番号を付けるなりすればいいのでしょうか？ 初心者の私に出来る限り判りやすく教えて頂けませんか？よろしくお願いします。 <SCRIPT Language="JavaScript"> <!-- if(navigator.appVersion.charAt(0) >=3) { var changeImg= new Array(); changeImg[0] = new Image(); changeImg[0].src = "blank1.jpg"; changeImg[1] = new Image(); changeImg[1].src = "5.bmp"; changeImg[2] = new Image(); changeImg[2].src = "6.bmp"; changeImg[3] = new Image(); changeImg[3].src = "7.bmp"; changeImg[4] = new Image(); changeImg[4].src = "8.bmp"; var changeCount = 0; function change() { if(changeCount < changeImg.length-1) { changeCount++; } else { changeCount = 0; } document.images["change_img"].src = changeImg[changeCount].src; } } //--> </SCRIPT> 画像の部分には下記のような設定をしています。 <A HREF="javascript:change()"><IMG SRC="blank1.jpg" width="450" height="213" name="change_img" border="0"> ちなみに使用する画像は５枚か６枚で、共用してそれぞれ別の枠内に呼び出すことも可能でしょうか？ 例えば１．jpgという画像を２枚並べたりという意味です。
- ベストアンサー
- JavaScript
- マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </html>
- ベストアンサー
- JavaScript
- changeImgによる画像の入れ替え時のIEにおける不安定さ
changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。 表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。 何処がおかしいのでしょうか？どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- セルの背景画像ランダムチェンジがうまくいきません！
過去の質問などを参考にセルの背景画像のランダムチェンジのソースを作りましたがうまく表示されません！何かアドバイスがあれば是非お願いします。 <head> <script language="javascript"> var BGimg=new Array(); BGimg[0]="image/01.gif"; BGimg[1]="image/02.gif"; var img_pcs=BGimg.length;//画像の数 var rdm_num=Math.floor(Math.random()*img_pcs);//乱数 function chg_BGimg(){ document.getElementById("changeIMG").style.backgroundImage="url('"+BGimg[rdm_num]+"')"; } </script> </head> <body onload="chg_BGimg();"> <table bgcolor="#333333"> <tr> <td id="changeIMG" style="background-image:url('image/first.gif');">このセルの背景が変わります</td> <td>blank</td> <tr> </table> </body> （実際のテーブルは列11×行9です。） 以上がソースです。どうも初期設定のfirst.gifが一瞬だけ表示されて、あとはテーブルの背景色になり、何も画像が表示されてず、「×」マーク（画像が見つからなかった場合にでるアイコン）もないのです。 このソースの改良点または、全く違う方法でも結構です、何かアドバイスがあれば是非お願いします。よろしくお願いします！
- ベストアンサー
- JavaScript
- テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問
テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問された方のログがありましたので、そこに追記で質問させてください。 以下は回答者の方のアンサーになります。 <html> <head> <title></title> <script type="text/javascript"> <!-- lnkimgsrc= new Array(); lnkimgs= new Array(); lnkimgsrc[0]="***0.jpg"; // リンク0の画像 lnkimgsrc[1]="***1.jpg"; // リンク1の画像 lnkimgsrc[2]="***2.jpg"; // リンク2の画像 lnkimgsrc[3]="***3.jpg"; // リンク3の画像 lnkimgsrc[4]="***4.jpg"; // リンク4の画像 /* 上記で画像のURLを指定 */ for (i=0; i<lnkimgsrc.length; i++){ lnkimgs[i]= new Image(); lnkimgs[i].src=lnkimgsrc[i]; } function changeImg(x){ if (document.images){ document.images['tgt'].src=lnkimgs[x].src; } } // --> </script> </head> <body> <a href="***0.html" onMouseover="changeImg(0)">リンク0</a> <a href="***1.html" onMouseover="changeImg(1)">リンク1</a> <a href="***2.html" onMouseover="changeImg(2)">リンク2</a> <a href="***3.html" onMouseover="changeImg(3)">リンク3</a> <a href="***4.html" onMouseover="changeImg(4)">リンク4</a><br> <img src="***.jpg" name="tgt"> </body> </html> この状態で、表示された画像から、テキストリンクと同じリンク先に飛ばしたい場合はどのようにすればいいでしょうか。。 よろしくお願いいたしますm(__)m
- ベストアンサー
- JavaScript
- JavaScriptでリクエストを飛ばす方法を教えて下さい。
下記内容で画像の切り替えを教えて頂いたのですがこれに 画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと 思います。 どうしたら良いでしょうか？？ ブラウザーの画面は画像をクリックしても切り替わりません。 誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。 何卒よろしくお願いします。 <html> <head> <script type="text/javascript"><!-- function clickImg( img ) { var arraySrc = img.src.split( '/' ); var src = arraySrc[arraySrc.length - 1]; if( src == "a.jpg" ) { document.cookie = "click=1;"; img.src = "b.jpg"; img.style.cursor = "default"; } } function init() { if( document.cookie ) { var img = document.getElementById( "img1" ); document.getElementById( "img1" ).src = "b.jpg"; img.style.cursor = "default"; } } //--></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
- 締切済み
- JavaScript
- DIVの高さをかっこよく変える方法
皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>
- 締切済み
- JavaScript
- 画像切り換えでTransitionをかけたい。
フリーソースでの応用なのですが 次のJavaScriptで画像の自動切り換え表示に Transitionをかけたいのですが、知識がなくてわかりません。 アドバイスをお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; function timer () { if(document.img.complete) { document.img.src = "photo" + num + ".jpg"; num++; if(num > 5) num = 1; } setTimeout("timer()", 1000); } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function viewSource(){ location = "view-source:" + window.location; } </SCRIPT> ----------- <BODY onload="setTimeout('timer()', 2000);"> <IMG SRC="photo1.jpg" NAME="img"> -----------
- 締切済み
- JavaScript
補足
素早い回答ありがとうございます。 最終的に以下のようになりましたが、 F11で画面を最大化した場合で、かつ、画像が切り替わる瞬間、 右上にメニューが出てしまいます。 画像を読み込んでいるから出るわけではなく、JavaScriptが動いてるか、 または、スタイルシートの背景画像を入れ替えたから出ていると思います。 なんとかする方法はないでしょうか？windows2000とIE6です。 <HTML> <HEAD> <TITLE>test</TITLE> <style type="text/css"> </style> <script language="JavaScript"> <!-- var TIMER="10000"; //スライド切替時間(1秒=1000) var TIMER_ID="-1"; //タイマーID(スライド停止:TIMER_ID=-1) var count="0"; //表示画像のカウント var pict_num = 3; //画像の数 var pict = new Array(pict_num); //画像オブジェクトのポインタ配列 var pict_src = new Array(pict_num); //画像のパスの配列 pict_src[0] = "./SunSet.jpg"; //この画像は初期画像なのでHTMLのBODY部分で表示させる pict_src[1] = "./Winter.jpg"; pict_src[2] = "./BlueHills.jpg"; for(i=0; i<pict_num; i++){ pict[i] = new Image(); pict[i].src = pict_src[i]; // 受信待ちループ wk = 1; while(1){ //ダウンロードが終わったらループを抜ける if(pict[i].complete == true){ break; } //一応、無限ループ対策 if(wk > 30000){ break; } wk++; } } function TimerStart(){ if(TIMER_ID == -1){ TIMER_ID = setInterval('ChangeImg()',TIMER); //停止中の場合に実行 } } function ChangeImg(){ count++; count %= 3; // document.body.style.backgroundImage="url(" + pict[count] + ")"; //bodyの背景画像変更 // document.body.style.backgroundImage="url(" + pict[count].src + ")"; //bodyの背景画像変更 document.getElementById("body_id").setAttribute("background", pict[count].src); //bodyの背景画像変更 } //--> </script> </HEAD> <BODY id="body_id" onload= "TimerStart()" BACKGROUND="./SunSet.jpg" style="background-color:#000000;color:#ffffff;overflow:hidden;background-repeat: no-repeat;background-position: 50% 50%;"> <FONT SIZE=+2> <MARQUEE DIRECTION="UP" LOOP="1" SCROLLAMOUNT="3" height="100%"> 山田太郎<BR> 田中花子<BR> 愛井上男<BR> </MARQUEE> </BODY> </HTML>