タイトル通りなのですが、なかなかうまくいきません・・・。
<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に関してはほとんど無知ですがよろしくおねがいします。
※意味不明なことを言っていたらすみません。
No.1ベストアンサー
- 回答日時:
head要素内でbodyタグを書き出すようになっている点が気になります。
本来であれば、bodyタグは1つだけですので、ソースのHTML文法の面での整合性を重視するなら、ちょっと強引過ぎるかもしれません。document.write()でbodyタグを書き出す方法を取るのであれば、それよりもhead要素内にJavaScriptでstyleタグを書き出して、そのスタイルシートで背景画像を指定するのがよいのではないでしょうか。
あるいは、DHTML的手法を使って、JavaScriptからbody要素の背景画像のスタイルシートにアクセスし、書き換えるという方法でも良いかも知れませんね。
とりあえず、document.write()でスタイルシートを書き出す手法を。
<SCRIPT LANGUAGE="JavaScript"><!--
h = new Date();
t=h.getHours();
if (t<=5) { bgimg="test1.gif"}
else if (t<=11) { bgimg="test2.gif"}
else if (t<=17) { bgimg="test3.gif"}
else { bgimg="test4.gif"}
stl="<style type=\"text/css\"><!--\n body{background-image: url(\""+bgimg+"\");\n}/n-"+"-><"+"/style>\n";
document.write(stl);
//---> </SCRIPT>
<style type="text/css"><!--
body{
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom right;
}
--></style>
これをhead内に入れてみてください。 背景画像を指定するスタイルシートはJavaScriptから書き出すようにして、それ以外のスタイル(背景画像の表示位置、リピートなど)については共通しているようですので、JavaScriptからではなく、style要素を別に書き込んで、そこから読み込ませる形にしてあります。
これでうまくいくのではないでしょうか。
参考になれば。 見当違いでしたら、ごめんなさい。
回答ありがとうございます!うまくできました!完璧です!
head要素内でbodyタグを書き出すのは強引だったんですねぇ・・・。背景画像を指定するのだけにJavaScriptを使えばよかったんですね。本当に助かりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
自動ポップアップで画像を表示...
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
引数を渡さずに呼び出し元の変...
-
前のページに戻るとページトッ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
onchangeイベントを使ってspan...
-
同じIDで定義した要素の配列を...
-
1日1回引けるJavaScriptおみく...
-
Click回数を数え、規定された回...
-
canvas上で画像を移動する方法...
-
C# .NET DataGridView の行を追...
-
jslintのエラーについて質問
-
var_dumpのdump意味はを知りた...
-
googleスプレッドシートのApps ...
-
javascriptで文字挿入でtoggle...
-
javascript 特定のタグのidの存...
-
GASでundefinedエラーが出ます
-
FireFoxのjavascriptで自動でキ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openでタイトル名の指定
-
ホームページに日付を自動更新...
-
テキストボックスに入力された...
-
for文のiを使ってリンク先のア...
-
○歳△ヶ月と×日を計算してくれる...
-
引数を渡さずに呼び出し元の変...
-
なぜ、ジャバスクリプトが表示...
-
innerHTMLにて設定した情報を再...
-
前のページに戻るとページトッ...
-
更新でランダムでページ内のテ...
-
今日の月と日付の1週間後や3日...
-
「今日の日付けを画像で表示」...
-
java カレンダーの日付指定で...
-
文字列を点滅させたい
-
HTMLを記述しつつサブ窓(showM...
-
条件分岐(IF文)の簡素化
-
Java Scriptのメソッドについて
-
javascriptとphpの連携で疑問
-
現在の日付から、1ヶ月前にす...
-
この方法を教えてください。
おすすめ情報