ベストアンサー

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

2005/07/30 00:49

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

kinnta
お礼率53% (22/41)

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

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

ベストアンサー

Desires
ベストアンサー率40% (173/424)

2005/07/31 14:41 回答No.4

#１です…条件分岐のif文を間違えていましたので訂正します ifは、#２さんが書いてたように「if( hh >= 8 && hh < 19 ){」としないと、意図した動作をしません; 修正スクリプトは、いかになります。 (無駄な部分を削りました;) -------------------------------------- /* ↓　画像切り替えサンプル　↓ date = new Date();　　　// 日時を取得 hh = date.getHours()　　// 時を取得 /* ここから条件分岐 hh が 8以上19未満なら、画像aaa.jpgを表示する */ if( hh >= 8 && hh < 19 ){ document.write("AM <IMG SRC=./aaa.jpg>"); /* 条件が合わなければ、画像bbb.jpgを表示する */ } else { document.write("PM <IMG SRC=./bbb.jpg>");　 } /* ↑　ここまで　↑ */ -------------------------------------- /* ↓　背景色と画像切り替えサンプル　↓ */ date = new Date();　　　// 日時を取得 hh = date.getHours()　　// 時を取得 /* ここから条件分岐 hh が 8以上19未満なら、背景色darkblueで塗り、画像bg-am.gifを表示する */ if( hh >= 8 && hh < 19 ){ document.write("<BODY BGCOLOR='#00008B' BACKGROUND='./bg-am.jpg'>"); /* 条件が合わなければ、背景色dodgerblueで塗り、画像bg-pm.gifを表示する */ } else { document.write("<BODY BGCOLOR='#00008B' BACKGROUND='./bg-pm.gif'>"); } /* ↑　ここまで　↑ */ -------------------------------------- 使い方は、画像切り替えサンプルの場合は、HTML文の中には、表示したい位置に <SCRIPT TYPE="text/javascript" src="./time-g.js"></SCRIPT> と、挿入背景色と画像切り替えサンプルの場合は、HTML文の中の先頭に書く<HTML><BODY>の後に <SCRIPT TYPE="text/javascript" src="./time-bg.js"></SCRIPT> と、挿入してください。以上、失礼しました…(^-^;;

その他の回答 (3)

Desires
ベストアンサー率40% (173/424)

2005/07/30 19:55 回答No.3

#１です。訂正と追加を書きます。 #１で書いていたコメント部分にミスがありました(ハズイ;)が、スプリクト実行には影響は無いです。なお、このスプリクトは時：分を細かく指定できるように書いていますので、ここを好きなように書き換えてください。誤）pm = "19:0"　　　　　　// amに19:0を代入正）pm = "19:0"　　　　　　// pmに19:0を代入また、以下の部分は１つにまとめても問題ないです。＞am = "8:0"　　　　　　　// amに8:0を代入＞pm = "19:0"　　　　　　// amに19:0を代入　　　　　　　↓↓ ampm = "8:0/19:0"　　　　　// ampmに指定時間「8:0/19:0」を代入 ----追加------ 単一画像では無く背景色＆画像の切り替えもサンプルも書いておきます背景色を塗ってから、背景画像を出すと、画像の読み込みが遅くなっても、変化した雰囲気は、見ているユーザーに伝わると思います。 BGCOLORは、英語色名でも16進数RGBのどちらでも可能ですが、今回は16進数RGBを使用します。 /* ↓　画像切り替え２　指定「時:分」で背景色と画像が切り替えれるサンプル　↓ まず下準備から */ date = new Date();　　　// 日時を取得 hh = date.getHours()　　// 時を取得 mm = date.getMinutes()　// 分を取得 ampm = "8:0/19:0"　　　　　// ampmに指定時間「8:0/19:0」を代入 hhmm = ( hh + ":" + mm );　// hhmmに時:分を代入 /* ここから条件分岐 */ if ( ampm == hhmm ) { document.write("<BODY BGCOLOR='#00008B' BACKGROUND='./bg-am.gif'>");　// ampm と hhmm の値が同じなら、背景色darkblueで塗り、画像bg-am.gifを表示する } else { document.write("<BODY BGCOLOR='#00008B' BACKGROUND='./bg-pm.gif'>");　// 条件が合わなければ、背景色dodgerblueで塗り、画像bg-pm.gifを表示する } /* ↑　ここまで　↑ */ コピペできるサンプルを作成しましたので、メモ帳等に「time-bg.js」で保存し、「bg-am.gif」画像と「bg-am.gif」画像を同一フォルダに入れてください。 HTML文の中には、<HTML><BODY>の後に <SCRIPT TYPE="text/javascript" src="./time-bg.js"></SCRIPT> と、挿入してください。最後に、作成したHTMLファイルをブラウザで表示して確認してください。＊私が、HTML文内にJavaScriptのソースを書かないのは、各ページで使い回ししやすいようにとHTMLソースが長くならない様にとの思いから、HTML文とJavaScriptソースは別にしていますまた、こう様な構造にすると、HTMLソースとJavaScriptソースを別々に編集可能ですし、見やすくなると思います。 ----参考------ JavaScriptの参考になるURLも書いておきます・自作JavaScript http://www2j.biglobe.ne.jp/~apollo/javascript/ ・独学JavaScript http://www.ueda.info.waseda.ac.jp/~gaku/js/ ・JavaScript小技集 http://javascript.maxux.com/ ・JavaScript basic samples http://www.sumnet.ne.jp/domp/jsbs/

goose_x_viper
ベストアンサー率42% (26/61)

2005/07/30 03:12 回答No.2

こんばんは。これを実現するためには、JavaScript や, PHP などいくつかの方法があります。今回は、ブラウザさえあれば、作成した HTML を実行、確認できる JavaScript での実現方法を紹介したいと思います。まず、JavaScript って何ぞや？と。まぁ、それは興味があったら、調べてください。 google 等で検索すれば、わんさかわんさか…。 1 : <html> 2 : <script language = "JavaScript"> 3 : hiru = 'hiru.jpg'; 4 : yoru = 'yoru.jpg'; 5 : function set_img(){ 6 : date = new Date(); 7 : time = date.getHours(); 8 : if(time >= 8 && time < 19){ 9 : document.images["myimg"].src = hiru; 10: }else{ 11: document.images["myimg"].src = yoru; 12: } 13: } 14: </script> 15: <body onLoad="set_img();"> 16: <center> 17: <img src = "" name="myimg" width="150" height="150"> 18: </center> 19: </body> 20: </html> と。 test.htmlとでも名前を付け⇒ブラウザで見てみましょう。２行目：　JavaScript を書きますよ宣言。３、４行目：　表示したい画像はどれですか？もちろん、名前は自由です。５行目：　set_img() という呪文を作ります。（これまた名前は自由）６行目：　new Date()と呪文を唱えると、今の日時、時間を教えてくれます。　それを date という入れ物に放り込みましょう。７行目：　今知りたいのは、時間なので、時間だけ教えてくれる呪文で　時間を取り出し time という入れ物に詰め込みます。８行目：　もし(= if) 今の時間(= time) が８時以上で、　かつ(= &&) 今の時間(= time) が19時未満だったら… ９行目：　昼用の画像を… １０行目：　さもなければ… １１行目：　夜用の… １２行目：　分岐の終わりですよ！１３行目：　set_img() 呪文が完成！１４行目：　JavaScript さんお疲れ様でした～。１５行目：　onLoad="set_img();" 呪文を唱えた。食らえ！１６行目：　なんとなく…真ん中に。１７行目：　ブラウザ「うわぁ～。画像が…、おのれぇ…。」　ブラウザは呪文を受け、画面に画像を表示した。１８行目：　真ん中にいたのね。１９行目：　体終わり。２０行目：　…そして伝説になる…。というストーリーになっております。このストーリーは、ほんの一例に過ぎません。これを機に、JavaScript を勉強するのも良いでしょう。がんばって、kinnta さんにしかできない、オリジナルなサイトを作り上げてください！！参考になれば幸いです。

Desires
ベストアンサー率40% (173/424)

2005/07/30 02:54 回答No.1

画像切り替えは、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な様に書いています */