その他１１ ■面白■　TIMEごとに画像連番変化・応用　　　　最終修正日 : 2015/01/15

今回は、『１時間ごとに画像変化・連番』の応用編です。下にそのページを、見本として呼び出しました。
スクロールして、『CSSでの装飾を省いたJavaScriptのソース』の場所を見て下さい。
基本は、連番の画像を使うということで、それを前提とした応用編です。連番指定の詳細は、見本ページをどうぞ。ここでは簡単に、image数字.jpgで解説します。
こちらの応用編では、見本のような『Ａ.普通の画像の変化』と、『Ｂ.背景画像の変化』の２ジャンルあります。
変更するのはJavaScriptのソース内の、以下の部分だけです。赤字部分は黒字に戻しました。この部分を削除して、差し替えして下さい。

var h= (new Date()).getHours();
var ga="image"+h+".jpg";
Ga.src = ga;
Ga.title=""+h+"時過ぎだよ！";

Ａ.普通の画像の変化
1.１時間ごとに変化　→　見本通り。
画像の数字で、0〜23の２４枚の画像が必要です。0が０時に、1が１時、2が２時、3が３時・・・に表示されます。


2.曜日で変化

var Wday= [ "日", "月", "火", "水", "木", "金", "土" ];
var w= (new Date()).getDay();
var ga="image"+w+".jpg";
Ga.src = ga;
Ga.title=""+Wday[w]+"曜日だよ！";

画像の数字で、0〜6の７枚の画像が必要です。0が日曜、1が月曜、2が火曜、3が水曜・・・に表示されます。


3.月で変化

var m= (new Date()).getMonth()+1;
var ga="image"+m+".jpg"; 
Ga.src = ga;
Ga.title=""+m+"月だよ！";

ほんとうは　0が１月、1が２月、2が３月・・・なのですが、わかりづらいので、『getMonth()+1』とすることで、
1が１月、2が２月、3が３月に表示されます。1から12の１２枚の画像を作って下さい。


4.日で変化

var d= (new Date()).getDate();
var ga="image"+d+".jpg"; 
Ga.src = ga;
Ga.title=""+d+"日だよ！";

getDate()で、日付の数字を取得できます。日付には０日はないので、画像の数字は1から31の３１枚の画像が必要です。
0で作成しても、その画像が表示されることはありません。31がないと、３１日に表示される画像はありません。
日付と画像番号が一致します。『１時間ごとの画像変化』の時に0の画像を作成するのは、時間には０時があるからです。

Ｂ.背景画像の変化
■『普通の画像の変化』とは、それぞれの　１時間、曜日(上の１行も)、月、日の各ソースの中の、最後の２行が別の1行に変わります。
そしてbodyの中に記述する<img src="" id="Ga">は不要なので削除して下さい。

1.１時間ごとに変化。画像は0〜23の２４枚の画像が必要。

var h= (new Date()).getHours();
var ga="image"+h+".jpg";
document.body.style.backgroundImage="url('"+ga+"')";

2.曜日で変化。0〜6の７枚の画像が必要。0が日曜、1が月曜〜〜。
var Wday= [ "日", "月", "火", "水", "木", "金", "土" ];　← この行は不要です。

var w= (new Date()).getDay();
var ga="image"+w+".jpg"; 
document.body.style.backgroundImage="url('"+ga+"')";

3.月で変化。1〜12の１２枚の画像が必要。

var m= (new Date()).getMonth()+1;
var ga="image"+m+".jpg"; 
document.body.style.backgroundImage="url('"+ga+"')";

4.日で変化。1から31の３１枚の画像が必要。

var d= (new Date()).getDate();
var ga="image"+d+".jpg"; 
document.body.style.backgroundImage="url('"+ga+"')";

5.背景画像指定の時の注意。
背景画像の位置指定は、通常通りCSSで指定して下さい。
上端一列、下端一列、左端一列、右端一列、一個のみ指定等。何も指定しない時は、敷き詰め表示になります。
その際、背景画像指定もした方がいいと思います。背景画像指定は無くても動作するのですが、何かのトラブルでJavaScriptが停止した時の用心のためです。
画像ファイル名は何を指定しても大丈夫です。

今回のこのページでは、『Ｂ.背景画像の変化』の「4.日で変化」を使用しました。 位置指定は右端一列指定です。下のソースはその分です。

おまけ : body(全体)の背景画像ではなく、table(テーブル)やdivで作成した部分の背景画像をTIME変化させたい時。
上記『Ｂ.背景画像の変化』のそれぞれのパターンの最後の１行の
document.body.style.backgroundImage="url('"+ga+"')";　を
document.getElementById("aka").style.backgroundImage="url('"+ga+"')";　に変更して
変更させたいタグに、<table id="aka">とか<div id="aka">というように、 id="aka"を記述して下さい。

以上で、「おまけ」を含めると全部で１２通りの、応用編の説明が終了です。
最後に重要な注意事項。
これらのパターンを、同じページで複数使用する時には、注意することがあります。
画像は同じものを使用できますが、同じidは使用できません。
id="Ga"が使用されてるソースを複数使用する時は、id="Ga"、id="Ga2"というように、変更して下さい。
そしてJavaScriptのソースの中も、Ga2.src = ga;　Ga2.title=""+■+"●だよ！";というふうに変更して下さい。

id="aka"が使用されてるソースを複数使用する時は、id="aka"、id="aka2"というように、変更して下さい。
そしてJavaScriptのソースの中も、document.getElementById("aka2").style.backgroundImage="url('"+ga+"')";　というふうに変更して下さい。
h、w、m、d　の変数も、それぞれh、h2、h3・・・、w、w2、w3・・・、というふうに変更して下さい。