任意のテーブルに背景画像を設置し、時間ごとに変更する方法
- 任意のテーブルに背景画像を設置し、時間ごとに画像を変更する方法について相談です。
- CSSを使用してテーブルに背景画像を設定することはできますが、時間ごとに画像を変更する方法がわかりません。
- JAVAスクリプトを使用して背景画像を時間ごとに変更する方法についてアドバイスをお願いします。
- ベストアンサー
任意のテーブルのみに背景画像を設置して、時間ごとに変更するには？
ホームページを作っていてどうしても うまくいかないことがあるので相談させてください。 １ページの中に複数のテーブルがあるのですが、 そのうちの一つだけに背景画像を設置して、 尚かつ時間ごとに画像を変更したいのですが、 うまくできません。 BODYの背景を変える場合は、JAVAスクリプトで できたのですが、任意のテーブルのみに同じような ことをすることはできないのでしょうか。 いくつか試したのですが、例えばCSSを用いて、 <style type="text/css"> <!-- .timg{ background-attachment: scroll; background-image: url(img/001.gif); background-repeat: no-repeat; background-position: center; } --> </style> としておき、任意のテーブルタグにて <table class="timg"> とすることで、任意のテーブルのみに 背景をつけるとこまではできたのですが ここからJAVAスクリプトで背景を時間ごとに 変えるやり方がわかりませんでした。 どうかアドバイスよろしくお願いします。
- happyrin
- お礼率83% (10/12)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでしょうか。なお、getSeconds()の箇所はgetHours()に対応させて下さい↓ <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- #timg{ background-attachment: scroll; background-repeat: no-repeat; background-position: center; } --> </style> <script language="JavaScript"> <!-- function bgchng() { hs = (new Date()).getSeconds(); // 時間の時は、getHours() if((hs >= 0) && (hs < 20)) { document.all["timg"].style.backgroundImage = "url(http://oshiete1.goo.ne.jp/images/goo.gif)"; } if((hs >= 20) && (hs < 40)) { document.all["timg"].style.backgroundImage = "url(http://oshiete1.goo.ne.jp/images/goo_h1_50b.gif)"; } if((hs >= 40) && (hs < 60)) { document.all["timg"].style.backgroundImage = "url(http://oshiete1.goo.ne.jp/images/goo_i_50_new.gif)"; } } //--> </script> </head> <body onload="bgchng()"> <table border="1" bgcolor="#ffffcc"> <tr height="100"> <td width="200" align="center" id="timg">背景あり</td> <td width="200" align="center">背景無し</td> </tr> </table> </body> </html>
その他の回答 (1)
私はこちら系（JavaScript系）の専門ではありませんが， そういう専門の問題ではなく， 根本的に，「時間によって変える」の意味がわかりません。 数秒ごとという時間ごとに背景を変えるのか， 時によってページが表示された時だけ（ランダムに）背景を変えるのか， 時間（時刻）によって時刻ごとに表示させた時だけ背景を変えるのか， 時間（時刻）によって，時計のように順次切り替えて背景画像を切り替えるのか。 プログラムの前に，日本語は難しいですね。 時間という言葉は，時刻ととることもできますし， 時間経過によって順次という意味もありますし， 時間経過は関係なく，表示された時点だけという意味にもとれます。 いったいどの場合なのか，補足してください。 私以外のどなたかも，回答しやすくなります。 また，CSS は絶対に必要なのですか？ CSS は必要，CSSは使わなくても良い。 その点の補足もおねがいします。
補足
ご指摘頂いた点を補足致します。 まず時間による変更ですが、 １時間ごとに背景を変更したいと思ってます。 （０時から１時までは001.gif、１時から２時までは002.gifと いう具合に） CSSについてはどちらでもかまいません。 使わずに出来るのであれば使わなくても よいです。 よろしくお願いします。
関連するQ&A
- 時間帯によって背景画像を変える
タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・？どのようにすればうまくいくでしょうか？JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。
- ベストアンサー
- JavaScript
- 2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- 締切済み
- CSS
- 背景画像を下まで見せたい
写真・イラストのギャラリーページを作ってるんですが、背景として設定した画像をスクロールして下まで見れる設定にするにはどうしたらよいのでしょうか？ 画面設定は1024×768、画像自体は1000×600pixの大きさです。 現在は以下の方法で設定してます。 <STYLE type="text/css"> <!-- BODY{ background-image : url(○○○○○○); background-attachment : scroll; background-repeat : no-repeat; } アドバイスの程、宜しくお願い致します。
- ベストアンサー
- HTML
- テーブルの特定のセル背景非スクロールについて
テーブルで文章を書いているのですが、 そのテーブル内の文章がちょっと長めで、 どうしてもブラウザがスクロール(縦)してしまう作りになっています。そのテーブルに背景を入れようと思うのですが、スクロールしてしまうほど長い縦テーブルな故に背景も繰り返してしまいます。 背景画像は壁紙のような整列された画像ではなく、一枚の写真を使用したいとおもっております。 縦長の大きい背景を作るというのも一つの手ですが・・・それではなくタグ命令で固定できればと思います。 通常のページ背景ですと背景固定は ◆bodyタグで bgproperties="fixed" ◆スタイルシートで <STYLE type="text/css"> <!-- BODY{background-image:url("■.jpg"); background-color:#背景色; background-position:背景の位置; background-repeat:no-repeat; background-attachment:fixed;} --> </STYLE> って出来るのですが、 テーブル内部の特定のセル背景固定というのは どのようにしたら出来るのでしょうか? ジャバスクリプト、スタイルシート、通常のタグ どのような方法でもかまいません。 テーブル内の特定のセル背景非スクロールについて、 ご教授いただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルにスタイルシートを使う方法
こんにちは、テーブルタグのことで質問があります。 普通、背景画像でスタイルシートを使い右下などに固定するタグは <STYLE TYPE="text/css"> <!-- BODY { background-image : url("画像の名前"); background-repeat : no-repeat; background-attachment : fixed; background-position : left bottom; background-color:#FFFFFF; } --> </STYLE> となると思いますが、これは通常<head></head>の間にいれますよね。 これをテーブルの中で使うにはどうすればいいでしょう？ テーブルの背景画像を右下や左下などに固定したいということなんですがそういうことはできますか？ よろしくお願いします；
- 締切済み
- HTML
- 背景画像固定タグ
こんばんは。 背景画像を右一列や左一列に固定をしたいのですが、今まで出来ていたのに何故か出来なくなってしまいました。 使用しているサーバーは2スタイルです。 画面全体に表示させることは出来ました。 <STYLE type="text/css"><!-- body{ background-image:url(アドレス); background-attachment:fixed; background-repeat:repeat-y; background-position:right;} --></STYLE> このタグで間違いはないと思うのですが表示できません。 HEADの間に入れています。 お力を貸してください。宜しくお願い致します。
- 締切済み
- HTML
- HPの背景画像が表示されません
ホームページNinja９を利用してＨＰを作成しております。cssを使って背景画像を固定しているのですが、自パソコンから閲覧すると背景画像の固定表示はさていました。しかし最近、他パソコンから閲覧した際その背景画像が全く表示されていないことに気がつきました。当サイトの全てのページにおいて背景が表示されておりませんでした。そのパソコンで閲覧した他サイト様の背景はきちんと表示されていましたので自サイトの問題と認識しております。 しかし、その理由がわからなく困っております。どなたか教えて頂けないでしょうか。 因みに、使用したcssは次の通りです。 <style type="text/css"> <!-- body {background-image : url("◇◆◇.jpg"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat;} --> </style> ◇の部分のファイル位置は確認しましたが正しかったようです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 親フレームのリンクからアイフレーム内の背景画像を位置指定して変更する
アイフレーム内の最初に表示してあるページ内に <style type="text/css"> <!-- body{ background-attachment : fixed; background-repeat : no-repeat } --> </style> を書いて、親フレームのリンクにオンマウスオーバーとjavascriptをつかって、 背景画像を左上固定で繰り返さない指定はできたのですが、 指定する背景画像の位置をその都度変えたい場合に、 親フレーム内のリンクから指定する方法をご存知の方はどうか教えていただけないでしょうか？検索など、いろいろやってみたのですがどうもみつからないんです…
- ベストアンサー
- JavaScript
- 背景画像がテーブルに透けてしまう
<body background="画像のURL"> <STYLE TYPE="text/css"> <!-- BODY { background-color: white} --> </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">～ という感じでページを作っているのですが、 背景の画像が透けてテーブルの中の文字が見え難く 困っています。 テーブルの中は「white」で白に指定している つもりなのですが、白になりません。。 このタグでテーブルの中を背景が反映されず真っ 白にする方法ってあるのでしょうか？ 調べてみたのですがどうも分からないので教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
- HTMLでの背景画像設定について
はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
補足
gura_さん、どうもありがとうございます。 試してみたところ、一応はうまくいったのですが、 ブラウザによって表示されなかったりします。 WindowsとMac両方で確認してみたら、 IEやOperaではちゃんと表示されるのですが、 Safariでは画像が表示されませんでした。 Safariの設定もJAVAはオンになっています。 原因がわかれば教えていただけませんか。