ベストアンサー

テーブル背景を毎日入れ替える方法

2005/05/12 18:05

以前ここで同様の質問させていただいた者です。回答いただいた例を参考にして、自分なりに設定を直してみたのですが動かない状態です… もう一度ご教授をお願いします。テーブルの背景画像を日によって変更できるように、と思っています。 tableタグ内は、以下のようにしました。 <table id="BACKIMG" ～中略～ style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> またJavaScriptは外部ファイルにして【Change.js】の内容↓ function fncChange() { var a; var date = new Date(); var d = date.getDate(); a = d % 7; if (a==0){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images0/top.jpg)"; }else if (a=1){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images1/top.jpg)"; }else if (a=2){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images2/top.jpg)"; }else if (a=3){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images3/top.jpg)"; }else if (a=4){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images4/top.jpg)"; }else if (a=5){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images5/top.jpg)"; }else if (a=6){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images6/top.jpg)"; } } 使用する画像はフォルダで分けるつもりです。 HTMLにはHEADタグの間に <SCRIPT language="javascript" src="Change.js">  </SCRIPT> を記述しています。これで不足してる部分がありますでしょうか？解決策をよろしくお願いします。

sakuraniku
お礼率61% (11/18)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/05/12 18:50 回答No.1

HEADタグの間に、 fncChange(); と記述すると、画面がロードされる前に実行されます。なので、その時点では、getElementById("BACKIMG")、で指定されるテーブルがまだありません。 <SCRIPT language="javascript" src="Change.js"> </SCRIPT> として、 <body onload="fncChange();"> のようにすると、画面のロードが完了したときにfncChange()が呼び出されます。

質問者

お礼 2005/05/14 13:39

初歩的なミスですね（汗）ロードされるタイミングについて理解していませんでした。お恥ずかしい。大変参考になりました。ありがとうございました。

その他の回答 (2)

m035
ベストアンサー率44% (38/86)

2005/05/13 00:22 回答No.3

【Change.js】の内容↓ function fncChange() { document.getElementById("BACKIMG").style.backgroundImage="url(images/images"+(new Date().getDate()%7)+"/top.jpg)"; } 【*.html】の内容↓ <html> <head> <script language="JavaScript" src="Change.js"></script> </head> <body onload="fncChange();"> <table id="BACKIMG" style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> </body> </html> と、これが今までの回答をまとめ、かつ、変数を一つも増やすことなく実行できるバージョンのソースです。他の人のアイデアに少し改良しただけでしたが、少しは役に立ったでしょうか？

質問者

お礼 2005/05/14 13:49

m035さん、まとめて頂いて有難うございました。以上のように変更したら動きました。レスごとに次々改善点が増えて、こんなにスマートになるなんて笑ここはコンピューター[技術者向け]にカテゴリされているので、初歩的な質問でいいのかと恐る恐るの投稿でした。 m035さん含め、皆さんの回答大変参考になりました。有難うございました。

steel_gray
ベストアンサー率66% (1052/1578)

2005/05/12 22:01 回答No.2

#1さんの回答に加えて。判定をすべきところで代入しちゃってますね。 else if (a=n) ↓ else if (a==n) 判定を繰り返すのではなく、次のように一文にまとめてもいいかも。 document.getElementById("BACKIMG").style.backgroundImage = "url(images/images" + a + "/top.jpg)";

質問者

お礼 2005/05/14 13:41

確かに(^^;) スクリプト以前の問題ですね。自分でも判定の部分が長くて冗長になっているなとは思っていたのですが、知識がなく… 勉強になりました。有難うございました。

関連するQ&A

JS：画像を繰り返しランダム読込すると途中で止まる
現状は、ページの読み込み時にランダムで2枚の画像を読み込んで、loadのたびに違う画像が表示されるようにしています。それをリロードせずに繰り返し画像を切り変えるように変更したく下記のように「setTimeout("getImg()",1000); 」を追加したところ、画像の切り替え8回目の切り替えあたりで止まってしまいます。（その際、2枚の画像が同じ画像になります。毎回同じ画像でなるわけではない）変数か何かをクリアすればいいような気はするのですが、初心者レベルのためわかりませんでした。原因わかる方いましたらご教示頂ければ幸いです。 javascript：img1111.js ------------------------ function getImg(str){ //ランダム function randNum(){ var randNum = Math.floor(Math.random()*img.length); return randNum; } //表示処理 if(str=="wide"){ var n = randNum(); setIMG = 'url(images/'+img[n][1]+')'; document.getElementById('inner_recomend').style.backgroundImage = setIMG; if(img[n][0]){ setURL = '<a href="'+img[n][0]+'" target="_blank"></a>'; }else{ setURL = ''; } document.getElementById('right_contents_rec').innerHTML = setURL; }else{ //画像とURL取得 function imgSet(id,n){ var setIMG = 'url(images/'+img[n][1]+')'; document.getElementById(id).style.backgroundImage = setIMG; if(img[n][0]){ setURL = '<a href="'+img[n][0]+'" target="_blank"></a>'; }else{ setURL = ''; } document.getElementById(id).innerHTML = setURL; } var n = randNum(); imgSet('right_contents_rec1',n); img.splice(n,1); var nn = randNum(); imgSet('right_contents_rec2',nn); } //次のタイマー呼びだし setTimeout("getImg()",1000); } ------------- htmlは下記 ------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="swap"> <div id="select01"> <div id="inner_recomend"> <div id="right_contents_rec1"></div> <div id="right_contents_rec2"></div> </div> </div> </div> </body> <script type="text/javascript" src="img1111.js"></script> <script type="text/javascript"> var img = new Array(); //画像リストの設定 ('URL','画像ファイル名') img[0] = Array('http://www.000.co.jp/','15961.jpg'); img[1] = Array('http://www.000.co.jp/','15962.jpg'); img[2] = Array('http://www.000.co.jp/','15963.jpg'); img[3] = Array('http://www.000.co.jp/','15964.jpg'); img[4] = Array('http://www.000.co.jp/','15965.jpg'); img[5] = Array('http://www.000.co.jp/','15966.jpg'); img[6] = Array('http://www.000.co.jp/','15967.jpg'); img[7] = Array('http://www.000.co.jp/','15968.jpg'); img[8] = Array('http://www.000.co.jp/','15969.jpg'); // getImg(); </script> </html> ------------- よろしくお願いいたします。
- ベストアンサー
- JavaScript
ロールオーバーで画像を先読みする方法
スワップイメージを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
JavaScriptでリクエストを飛ばす方法を教えて下さい。
下記内容で画像の切り替えを教えて頂いたのですがこれに画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと思います。どうしたら良いでしょうか？？ブラウザーの画面は画像をクリックしても切り替わりません。誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。何卒よろしくお願いします。 <html> <head> <script type="text/javascript"></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
- 締切済み
- JavaScript
マウスオーバーするボタンの画像を英語に切り替え
マウスオーバーしたら、画像が変わるボタンを作成しています。基本は英語で作成しています。画像には文字が含まれているため、ブラウザの使用言語が日本語の時に画像を日本語用に切り替えようと考えています。 <a id ="trs_02" href="#aaa" onFocus="this.blur()" style="display:block; width:120px; height:30px; background:url(btn10.jpg) no-repeat;" onmouseover="this.style.backgroundImage='url(btn11.jpg)'"; onmouseout="this.style.backgroundImage='url(btn10.jpg)'";> </a> <script type="text/javascript"> chglg(); </script> として作成したのですが、 btn10.jpgとbtn11.jpgを btn10-jp.jpgとbtn11-jp.jpg に差し替えたいのです。 <script type="text/javascript"> function chglg() { var lang = (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2); if(lang == "ja"||"JP"){ document.getElementById("trs_02").style.backgroundImage="url(btn10-jp.jpg)"; } } </script> とすれば最初は日本語ですが、マウスオーバー時とマウスアウト時は日本語になりません。 this.style.backgroundImage='url(btn11.jpg)' の部分を切り替え方が解らず、困っています。出来ればdocument.getElementByIdを使いたいのですが... よろしくお願いします。
- 締切済み
- HTML
body onload にしない方法
外部jsにて function chgBg() { var n = 2; var i = Math.floor(Math.random()*n); var img = ['http～～～']; document.getElementById('ID').style.backgroundImage = 'url(' + img[i] + ')'; } っとし htmlに <body onload="chgBg()"> っとして、読み込み後にイメージをランダムに表示しています。問題なく、動作はするのですが <body onload="chgBg()"> ではなく <body> のまま、この動作をしたいのですが js側に何か追加すればこれは可能なのでしょうか？リロードするたびに、背景がランダムに表示することがしたいです。
- ベストアンサー
- JavaScript
時間によってテーブルのＴＤの背景画像を変更
ホームページの一部ですが、テーブルのＴＲにＴＤを三つつけています。その三つのうち、両側は部屋の壁にして、真中のＴＤのbackgroundに景色の画像を指定して、その上に、IMG SRCで窓枠の画像をつけています。このＴＤの背景画像の景色の画像を時間によって変更したいです。夕方時には、夕方の景色、夜は夜の景色を表示するようにしたいのですが、とりあえず、今書き込んでみたJavaScriptでは、インターネットエクスプローラーでは、表示されるのですが、ネットスケープ７．１ではエラーになってしまいます。どこがおかしいのか、わかりません。どうか教えてください。タグを書きこみしておきます。　なお、★は夜の景色画像、◎は昼の景色画像、●は夕方の景色画像です。 <html><head><title></title> <script language="javascript"> function chImg(){ today = new Date() var checkNum = today.getHours() if(checkNum == 0){ t1.style.backgroundImage="url(★)" } else if(checkNum == 1){ t1.style.backgroundImage="url(★)" } *************中略***************** else if(checkNum == 5){ t1.style.backgroundImage="url(◎)" } *************中略***************** else if(checkNum == 17){ t1.style.backgroundImage="url(●)" } } </script> </head> <body onLoad="chImg()"> <table> <tr><td bgcolor="white"> </td> //壁のTD <td ID="t1"><img src="mado.gif"></td> //景色と窓のTD <td bgcolor="white"> </td> //壁のTD </tr></table> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- JavaScript
文の折りたたみ
ブログなどでよくある「続き」を折りたたみで表示する方法を教えて下さい。ググってみたのですが、ブログのテンプレしか見つけられず、それを普通のページにどう応用したらいいのかがサッパリ分かりません。ヘッダに <script type="text/javascript">  </script> …と記述するのは分かったのですが、本文中をどうすればいいのか… お願いします。
- 締切済み
- JavaScript
cookie.jsを使ってクッキーを利用する方法。
cookie.jsを使ってクッキーを利用する方法。現在ジャバスクリプトにて、複数の画像、リンク、位置データがonClickで変わるように設定しています。違うページに行き戻ると、置き換えられた画像のデータがなくなってしまいます。 cookie.jsを使えばいいと思い、その設定方法をいろいろと調べてみましたがわかりませんでした。こういう場合は、ジャバスクリプトをどのように記入すれば良いのでしょうか。よろしくお願いいたします。 <body> <a href="http://www.a01"> <img name="AAA" id="AAA" src="images/a01.jpg" style="position: absolute; top: 310px; left: 220px; z-index: 45;" border="0" /></a> <a href="http://www.b01"> <img name="BBB" id="BBB" src="images/b01.jpg" style="position: absolute; top: 227px; left: 363px; z-index: 120;" border="0" /></a> <a href="http://www.c01"> <img name="CCC" id="CCC" src="images/c01.jpg" style="position: absolute; top: 418px; left: 425px; z-index: 120;" border="0" /></a> <form> <input value="" title="clear" style="background: transparent url(images/clear.gif) no-repeat;" onclick="document.AAA.src='images/spacer.gif';document.links[0].href='#';" type="button" /> <div class="AAA"> <a href="#" class="prev_AAA">戻る</a> <a href="#" class="next_AAA">進む</a> <ul> <li> <input value="" title="" style="background: transparent url(images/a01.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a01.jpg';document.links[0].href='http://www.a01'" type="button" /> </li> <li> <input value="" title="" style="background: transparent url(images/a02.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a02.jpg';document.links[0].href='http://www.a02'" type="button" /> </li> </ul></div> ……………… </form></body>
- ベストアンサー
- JavaScript
NN4で、ある日時になったら画像を消したい
先日、ある日時になったら画像を消す方法を教えて頂いたのですが、NN4でも動くように修正したいのですがどうすればいいかわかりません。その時教えて頂いたソースは下記です。 function start(){ var limitTime="2006/04/10 11:50:30";//ある日時を設定して下さい。 var limitDate=new Date(limitTime); var nowDate=new Date(); defTime=limitDate-nowDate; if(defTime>0){ document.getElementById("img1").style.display="block"; document.getElementById("img2").style.display="block"; setTimeout("task()",defTime); }else{ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } } function task(){ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } どうすれば動くようになるのか教えて頂けないでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptの計算のNaNの判定について…
いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか？いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>　　 <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>　　 <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>
- ベストアンサー
- JavaScript

テーブル背景を毎日入れ替える方法