掲示板/総合質問板/過去ログ/一覧/ テーブルの背景画像を時間帯別に変更できる様にしたいんですけど

0 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT: タイトル通り、
テーブルの背景画像を時間帯別に変更できる様にしたいんです。

テーブルの幅と枠幅を

<TABLE WIDTH="600" BORDER="1">

のタグで指定してから
時間帯別表示のタグ、

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

とかの形で出来るんじゃないかと思うんですけど、
○○○○○○○の部分がわからないんです。

一応、テーブル専用の背景画像表示タグに、

<TABLE BACKGROUND="gif">

があるみたいなんですけど
どう組み合わせるのか・・・
組み合わせられるのかも、わからないんです。

どなたか・・わかる方がいましたら
どうか、ご教授ください・・・よろしくお願いします。

1 名前： NullPo ： 2006/12/04（月） 00:28 ID:Z0FHbpib

こんなんでいいですかね。
配列に格納するかどうかなどはお好きになさってください。

<script type="text/javascript">

window.onload = function()
{
  var targetTable = document.getElementById("backTable");
  var thisHour = new Date().getHours();

  targetTable.style.backgroundImage = "url(" + thisHour + ".gif)";
}

</script>
</head>
<body>

<table id="backTable">
 <tr>
  <td><br></td>
 </tr>
</table>

2 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT: NullPoさん、返信ありがとうございます。
>>1に書いて頂いたソースなんですが、
どう扱えばいいのか、正直自分はわかっていません（すいません、こういうのに疎くて…）
私が上に書いたものにどう組み込めばいいのか
わからないんです・・。

右も左もわからない若輩者ですが
どうか、ご教授ください・・・よろしくお願いします。

3 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT

あれからいろいろ試していますが
まだ上手くいきません…。
一応、もう一度自分が今組んでいるソースを貼っておきます。

<TABLE WIDTH="600" BORDER="1" TABLE ALIGN="center">

<SCRIPT LANGUAGE="JavaScript">
<!--
var te = new Array(
"0.gif",
"1.gif",
"2.gif",
"3.gif",
"4.gif",
"5.gif",
"6.gif",
"7.gif",
"8.gif",
"9.gif",
"10.gif",
"11.gif",
"12.gif",
"13.gif",
"14.gif",
"15.gif",
"16.gif",
"17.gif",
"18.gif",
"19.gif",
"20.gif",
"21.gif",
"22.gif",
"23.gif");
TABLE BACKGROUND= 'URL('+te[(new Date().getHours())]+')';
//-->
</SCRIPT>

<TR>
<TD ALIGN="left" VALIGN="top">

<br>
文章
<br>
文章
<br>

</TD>
</TR>
</TABLE>

こんな感じです。
いろいろ間違ったところがあると思うんですけど
修正点がわかる人がいましたら、よろしくご教授ください。

（>>1のNullPoさんが書いてくれたソースを
理解できる能力が自分にあればいいのですが･･･。）

4 名前：キタ： 2006/12/04（月） 00:28 ID:oLLp3vho: ちょっとアドバイスというか感想です。
「>>1のNullPoさんが書いてくれたソース」以外に何を望んでいるわけですか。
回答のソースを貼って使えばいいだけだと思いますが・・・
推察するところ、実は配列というものがさっぱり分かっていないだけなのでは？
それ以前に、JavaScriptでのコードの書き方の基礎がデタラメのような気がします。
きちんとイチから勉強しなければ、あてずっぽうで書いても動きませんよ。

動きのあるホームページにあこがれる気持ちは分かりますが、子供のおねだりでは
ないのですから、自分でメンテができなければ、人さまのコードをそっくり使っても
どうしようもないと思うのですが。

5 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT: キタさん、貴重なご意見ありがとうございます。
キタさんの御推察通り、私は全くの素人･･･
一つ一つ基礎から勉強していくという事よりも
既にある物を実際に使ってみて学ぶという方法を取った独学者です。

やっぱりわかる人から見たら
間違いだらけなのが一目瞭然なんでしょうね・・。
今まで手探りしながら付け焼刃なものを組んできましたから。

今一度、JavaScriptとにらめっこしようと思います。
NullPoさんが書いてくれたソースを生かせるように。

またアドバイス・感想等で書いて頂けたら幸いです。

6 名前： 通りすがり ： 2006/12/04（月） 00:28 ID:9IuG66CT: > 今一度、JavaScriptとにらめっこしようと思います。
JavaScriptよりもhtmlの基本から勉強したほうがいいかもしれません。
<table>と<tr>の間にScriptを入れるのはどうかと思います。

>>1のソースではJavaScriptとtableの間には</head>と<body>があります。
JavaScriptは</head>より上、つまり<head>～</head>の間に、
tableは<body>より下、つまり<body>～</body>の間に入れましょう、
ってことです。

7 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT

通りすがりさん、御意見ありがとうございます。
通りすがりさんの言う事は自分でも、ごもっともだと思い
少しずつですが基礎からコツコツ勉強していっています。
おかげでわかったことや再確認した事も多々あります。
（それでもわからない事のほうが、やっぱり多いんですけど･･･。）

>>6の忠告に従っていろいろやってみてますが
まだ上手くいきません･･･。

申し訳ありませんが、またソースを張らせて頂きます。
まだまだあてずっぽの手探り状態で
恥ずかしいんですけど、見ていただけるでしょうか････。

<head>
<script type="text/javascript">
<!--
var te = new Array(
"0.gif",
"1.gif",
"2.gif",
"3.gif",
"4.gif",
"5.gif",
"6.gif",
"7.gif",
"8.gif",
"9.gif",
"10.gif",
"11.gif",
"12.gif",
"13.gif",
"14.gif",
"15.gif",
"16.gif",
"17.gif",
"18.gif",
"19.gif",
"20.gif",
"21.gif",
"22.gif",
"23.gif");
window.onload = function()
{
  var targetTable = document.getElementById("backTable");
  var thisHour = new Date().getHours();

  targetTable.style.backgroundImage = "te(" + thisHour + ".gif)";
}
//-->
</script>
</head>
<body>

<TABLE WIDTH="600"  BORDER="1"TABLE ALIGN="center" table id="backTable">
<TR>
<TD ALIGN="left" VALIGN="top">

<br>
文章
<br>
文章
<br>

</TD>
</TR>
</TABLE>
</body>

まだまだ至らない点が沢山あると思いますが
何か注意点やアドバイス、意見などを頂ければ幸いです・・。

8 名前：アム： 2006/12/04（月） 00:28 ID:EJKSShAP: 素人目なのですが、NullPo様が書かれたスクリプト部分のソースをそっくりそのまま当てはめれば動くように思いますが…
配列「te」を組み込む場所を模索していらっしゃるようですが、配列はこの場合必要ないように見受けられます。
「1.gif」等の画像名称が、こちらに書込む便宜上つけた名称で、実際の名称は違うのでしょうか？
そうであればその旨明記されたほうが良いと思いますよ。

後、少し気になったのですが
<TABLE WIDTH="600" BORDER="1"TABLE ALIGN="center" table id="backTable">
これは
<TABLE WIDTH="600" BORDER="1" ALIGN="center" id="backTable">
こうしておいたほうが無難だと思います。

9 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT: アムさん、ご意見ありがとうございます。
ご明察通り、「1.gif」等の部分は仮に付けたもので
本番は画像のアドレスが入ります。

私も、NullPo様が書かれたスクリプト部分のソースをそっくりそのまま当てはめれば
機能いてくれると思っているのですが･･･その・・、
画像アドレスをどの部分に当てはめれば良いのかわかっておりません。

自分の理解力の無さには呆れます。
全くもって、お恥ずかしい限りです･･･。

10 名前： カヅサツ ◆ThCi95HEzw ： 2006/12/04（月） 00:28 ［URL］ ID:O5hEMlpW: > ご明察通り、「1.gif」等の部分は仮に付けたもので
> 本番は画像のアドレスが入ります。

実際のファイル名を掲載すると、具体的なアドバイスが得られるかもしれません。
というか最初に提示すべき情報です。

> 私も、NullPo様が書かれたスクリプト部分のソースをそっくりそのまま当てはめれば
> 機能いてくれると思っているのですが･･･その・・、
> 画像アドレスをどの部分に当てはめれば良いのかわかっておりません。

>>1 のサンプルスクリプトは画像のファイル名が「1.gif,2.gif…」のように連番であることを前提にして作られています。連番でないなら当てはめようがありません。

なお、個人的には実際の画像のファイルの方を「1.gif,2.gif…」のように変えて >>1 を使うことをオススメします。

11 名前：アム： 2006/12/04（月） 00:28 ID:sQ8eMmln: targetTable.style.backgroundImage = "te(" + thisHour + ".gif)";

とされている部分を、

targetTable.style.backgroundImage = "url(" + te[thisHour] + ")";

としてみてはどうでしょうか？
動作はしましたが、このソースで問題があるようでしたらどなたかご指摘お願いします。

12 名前：匿名： 2006/12/04（月） 00:28 ID:YbPAWhqT: 嗚呼・・やっと・・出来ました。
みなさんの一つ一つの御助言のおかげです！
空回りばかりの私に多くの言葉をかけて頂いて、
ありがとうございました！！

今回の事を教訓に
これからも少しずつ基礎を身に付けて行きたいと思います！

今までご教授頂きまして、本当にありがとうございました！！