自動で画像を更新する方法

質問

初心者ですがホームページを作成中です。日中と夜間で表示している画像を変えたいのですがどうすればいいのかわからずに困っております。例えば8：00～19：00まではaaa.jpgを表示し、19：00～翌8：00までbbb.jpgを表示するといった感じです。初心者ですのであまり難しい事はわかりませんが、よろしくお願い致します。

回答No.1

Desires

画像切り替えは、JavaScriptを書くと簡単です。

コピペできるサンプルを作成しましたので、メモ帳等にtime-g.jsと保存し、aaa画像とbbb画像を同一フォルダに入れ、ブラウザにドラック＆ドロップして試してしてください。

HTML文の中には、表示したい位置に
<SCRIPT TYPE="text/javascript" src="./time-g.js"></SCRIPT>
と、挿入してください。

で、HTMLをブラウザで表示して確認してください。

/* ↓　画像切り替えサンプル　↓
まず下準備から */
date = new Date();　　　// 日時を取得
hh = date.getHours()　　// 時を取得
mm = date.getMinutes()　// 分を取得
am = "8:0"　　　　　　　// amに8:0を代入
pm = "19:0"　　　　　 　// amに19:0を代入

hhmm = ( hh + ":" + mm );　// hhmmに 時:分 を代入
ampm = ( am + "/" + pm );　// ampmに 8:0/819:0 を代入

/* ここから条件分岐 */
if ( ampm == hhmm ) {
document.write("<IMG SRC=./aaa.jpg>");　// ampm と hhmm の値が同じなら、画像aaa.jpgを表示する

} else {
document.write("<IMG SRC=./bbb.jpg>");　// 条件が合わなければ、画像bbb.jpgを表示する
}

/* ↑　ここまで　↑　
なお、コメントを含んでもOKな様に書いています */