背景画像の自動切換



<BODY> タグのアトリビュート BACKGROUND に、
画像を指定すると、タイルのように背景に張り付けてくれます。

例えば、細長いスリットを作って指定すると、
縦方向に画面の大きさまで、敷き詰めてくれます。

width=640 height=5 の大きさで次のように作ってみました。
（画面の都合で、ここでは縮めて表示しています）

朝：
昼：
夕：
夜：

これを、背景画像として指定するとどんな表示になるか、
試してみましょう。下のボタンを押してみて下さい。

時刻のイメージになりましたね。

この４種類の背景画像を、朝は４時から９時迄、
昼は９時から１６時迄、夕は１６時から１９時迄、
夜は１９時から４時迄として、自動的に切り替えてみます。

ボタンをクリックしてみて下さい。

如何ですか、現在時刻の背景になっていると思います。
次のように、<BODY> タグのところを、
JavaScript でコントロールすればよいのです。 

<HTML>
<HEAD>
・・・
</HEAD>

<SCRIPT language="JavaScript">
<!------

now = new Date()
tm  = now.getHours()
if ( tm > 3 && tm < 9 )   bg="asa.gif"
if ( tm > 8 && tm < 16 )  bg="hiru.gif"
if ( tm > 15 && tm < 19 ) bg="yugata.gif"
if ( tm > 18 || tm < 4 )  bg="yoru.gif"
document.write("<BODY BACKGROUND=" + bg + ">")

//------><BODY>
</SCRIPT>

・・・
</BODY>
</HTML>

"now" に Dateオブジェクトを作成し、"tm" に現在時を取得します。
現在時には、０時から２３時迄が "0" から "23" で代入されます。

if 文で、&&（AND:及び）と ||（OR:又は）を組み合わせて判断し、
該当する画像ファイルの名前を "bg" にセットします。
BACKGROUND に "bg" を指定し、その画像ファイルを表示します。

ここでは朝、昼、夕、夜用の４種類の画像ファイルを、
"asa.gif","hiru.gif","yugata.gif","yoru.gif"と名付けています。

<BODY>は、JavaScriptに対応していないブラウザのために、
記入しています。必ず記入して下さい。
未対応ブラウザ用に、アトリビュートを指定することも出来ます。

文字（ドキュメント）の色を、時刻によって変えてみましょう。

下のボタンを押してみて下さい。

背景の色によってドキュメントの色を変えると、
更に見栄えが良くなりますね。

これを自動化するとこうなります。 

<HTML>
<HEAD>
・・・
</HEAD>

<SCRIPT language="JavaScript">
<!------

now = new Date()
tm  = now.getHours()
if ( tm > 3 && tm < 9 )   { bg="asa.gif";    txt="blue";}
if ( tm > 8 && tm < 16 )  { bg="hiru.gif";   txt="black";}
if ( tm > 15 && tm < 19 ) { bg="yugata.gif"; txt="red";}
if ( tm > 18 || tm < 4 )  { bg="yoru.gif";   txt="white";}
document.write("<BODY BACKGROUND=" + bg + " TEXT=" + txt + ">")

//------><BODY>
</SCRIPT>

・・・
</BODY>
</HTML>

こんな形になります。アトリビュートとして TEXT= を追加しました。

ドキュメントの色だけを時刻によって変える場合は、
fgColor プロパティを使うことも出来ます。 

<HTML>
<HEAD>
・・・
</HEAD>
<BODY BGCOLOR=・・・>

<SCRIPT language="JavaScript">
<!------

now = new Date()
tm  = now.getHours()
if ( tm > 3 && tm < 9 )   txt="blue";
if ( tm > 8 && tm < 16 )  txt="black";
if ( tm > 15 && tm < 19 ) txt="red";
if ( tm > 18 || tm < 4 )  txt="white";
document.fgColor = txt

//------>
</SCRIPT>

・・・
</BODY>
</HTML>

ところで、このページの背景が現在時刻になっていることに
お気づきの方もいると思います。

０時から２３時までの２４枚の画像を切り替えています。
分かり易くするために、時刻を示す画像を使ってみました。

ここでは、"b0.gif" から "b23.gif" と言う名前にして、
次のような JavaScript を使っています。

<HTML>
<HEAD>
・・・
</HEAD>

<SCRIPT language="JavaScript">
<!------

now = new Date()
document.write("<BODY BACKGROUND=b" + now.getHours() + ".gif>")

//------><BODY>
</SCRIPT>

・・・
</BODY>
</HTML>

サンプル画像がご入り用の方は、ここをクリックして下さい。
キャッシュからコピーするか、所定の方法で保存することが出来ます。
（一旦画像が表示されれば、回線を切断しても後からでも保存できます）

ここでは getHours() 時刻によって、背景画像の切換をしてみましたが、
getYear() で年、getMonth() で月、getDate() で日、getDay() で曜日が
取得できます。　同じ様な使い方で応用が出来ると思います。