• ベストアンサー

時間によって背景画像の変更は?

iGoogleの一部の背景は時間によって背景の画像が変わっていますが、それを個人ホームページで実現させるにはどのようにすればよいのでしょうか。 04:00~07:00は明け方の画像、07:00~16:00は昼の画像、16:00~18:00は夕方の画像、18:00~04:00は夜の画像といった具合にしてみたいのですが、HTMLタグやJavaScript、CSSなどで実現するにはどうすればよいのでしょうか。よろしくお願いします。

noname#68745
noname#68745

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

  • ベストアンサー
noname#54567
noname#54567
回答No.1

http://www.sky.sannet.ne.jp/masapine/java_back11.html こちらを参考にするといいと思いますよ。

noname#68745
質問者

お礼

参考になりました。 ありがとうございます。

関連するQ&A

  • 時間によってテーブルのTDの背景画像を変更

    ホームページの一部ですが、テーブルのTRにTDを三つつけています。その三つのうち、両側は部屋の壁にして、真中のTDのbackgroundに景色の画像を指定して、その上に、IMG SRCで窓枠の画像をつけています。このTDの背景画像の景色の画像を時間によって変更したいです。夕方時には、夕方の景色、夜は夜の景色を表示するようにしたいのですが、とりあえず、今書き込んでみたJavaScriptでは、インターネットエクスプローラーでは、表示されるのですが、ネットスケープ7.1ではエラーになってしまいます。どこがおかしいのか、わかりません。どうか教えてください。 タグを書きこみしておきます。  なお、★は夜の景色画像、◎は昼の景色画像、●は夕方の景色画像です。 <html><head><title></title> <script language="javascript"> function chImg(){ today = new Date() var checkNum = today.getHours() if(checkNum == 0){ t1.style.backgroundImage="url(★)" } else if(checkNum == 1){ t1.style.backgroundImage="url(★)" } *************中略***************** else if(checkNum == 5){ t1.style.backgroundImage="url(◎)" } *************中略***************** else if(checkNum == 17){ t1.style.backgroundImage="url(●)" } } </script> </head> <body onLoad="chImg()"> <table> <tr><td bgcolor="white">&nbsp;</td> //壁のTD <td ID="t1"><img src="mado.gif"></td> //景色と窓のTD <td bgcolor="white">&nbsp;</td> //壁のTD </tr></table> </body> </html> どうかよろしくお願いします。

  • CSSで背景画像の上にラジオボタンを配置したい

    画面のある一部分に背景画像があり(背景画像もCSSで配置したい)、 その背景画像の上にラジオボタンを配置したいのですが、これはCSSで実現できますか? もし可能でしたら具体的なコード(htmlとCSS)を教えていただきたいです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • リンク画像をCSSを使って背景画像にするメリット

    リンク画像をCSSで設定するメリットは何ですか? 左上の「OKwave」のロゴマークもそうですが、なぜHTML言語のimgタグとaタグの組み合わせで、リンクを作っていないのでしょうか? CSSで画像を背景画像として設定するメリットは何なのでしょうか? すいません、ご教示願います。

    • ベストアンサー
    • CSS
  • HTMLの背景画像の表示位置を変更する方法

    HTMLの背景画像の表示位置を変更する方法 質問させてください。 HTMLの背景画像ですが、スタイルシートのbackground-positionを使用すれば表示位置を変更することが可能です。 同様の機能をスタイルシートを使用せずHTMLタグのみで実現できないでしょうか? 例えば、<body background=""></body>タグにさらに何かの属性を追加する、などです。 ご存知の方がおられましたら、是非ともお教えください。

    • ベストアンサー
    • HTML
  • CSSで背景画像指定

    どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか?

    • ベストアンサー
    • CSS
  • ヘッダー背景に画像を入れたい

    1.CSSというのは例えるならば、土地に区画を付けるものの事でしょうか?またそれに加え、先にカラーや文字などの設定を何らかの形で設定しておけば、HTMLでそのcssを記入すれば表示されるのでしょうか? 2.CSS単独でホームページ上に表現させる事は不可能なのでしょうか?または、一般的ではないですか? 3.HTMLと云うのは例えるならば、区画された土地に家を建てるようなことでしょうか? 4.本題に入りまして、ホームページの上の部分、ヘッダーと云う場所ですか?に800×300の画像を背景として入れたいのですが、挿入すると今までその場所にあったボタン類が全てその画像の下に置かれてしまいます。理想は今回挿入する画像の上にそれらボタンを置きたいのです。 恐らくそれらは、一つ一つの塊として認識されている為に、重ねる事が出来ないのだと思うのです。 CSSで設定すれば私の要求は解決できますか? 分かりづらいですが、大体のポイントでもいいのでお教えください。

  • URLごとに背景画像を変更したい

    現在CMSを使ってEC サイトを構築しています。 質問なのですが、全て1つのテンプレートファイルの<body>タグから、背景画像を読み込んでいるページ対し、URLによって、複数の背景画像をページ読み込み時に変更させたいのですが、どのようにすればよいか分かりません。 あまり、javascriptに関して詳しくないのですが、 document.getElementById()???~~を使ってBODYタグにidを指定すれば良いのか、何なのか手も足も出ない状態です。 対処方法をご存じの方はいらっしゃいますでしょうか? 宜しく御願いいたします。

  • jQueryで背景画像を変更したい。

    ブロック要素がありまして(下記<div id="box">boxの中身</div>) そのブロック要素の背景画像(背景は動的に生成)を 別の画像に変えたいと思っています。 ※現行のPCサイトのHTMLをいじらずに、スマホ対応しています 背景画像としては、 現在の背景画像⇒haikei.jpg 新しい背景画像⇒haikei_smp.jpg ↑こんな感じで ファイル名の「haikei」の部分は動的に生成しているため可変ですが、 もとの画像に「_smp」が付く画像ファイルを用意して、 対応したい考えています。 特にイベントはなく、loadしたら読み込む予定でいて 以下のように書いたのですが、 PC上のシミュレーターではうまくいくものの、 実際のスマートフォンで確認したら実行できませんでした。 PC上ではエラーもなかったのですが、 背景画像が変わらないといった不具合です。 HTML ---------------------- <div id="box">boxの中身</div> js ----------------------- $(function(){  //mainbgに現在の背景画像を格納  var mainbg = $("#box").css("background-image")    //mainbgを(".")で分割し、bgImgに格納  bgImg = mainbg.split(".");  var img01 = bgImg[0];  var img02 = bgImg[1];  //「_smp」を付与し、smp_mainbgに格納  var smp_mainbg = img01 + "_smp." + img02 ;  //jQueryでbackground-imageを変更操作  $("#box").css("background-image" , smp_mainbg); }); そもそも、この書き方がよいのか分かりませんが もっとスマートの書き方がありましたら 別の方法でも、どうかご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • cssで背景画像が貼れない

    background-image: url(××.gif) cssで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。

  • 外部CSSで背景画像を表示させる方法

    外部CSSについての質問です。 ホームページを作成するにあたり、外部CSSを使用しているのですが、背景画像が表示されません。 普通の(固定なし)背景画像はきちんと表示されるのですが、「背景画像を固定する」タグだと表示されません。 ソースは間違っていないし、何度やっても表示されず、こちらで質問することにしました。 固定方法は、パーセントで指定する方法です。 どなたかご指導頂けないでしょうか? よろしくお願い致します。

    • ベストアンサー
    • CSS