こんにちは。
時刻により<header>内の背景画像を変更したいです。
ネットで<body>内の背景画像変更コード(下記)は見つけたのですが、どうしたら<header>内に適用できるでしょうか。
教えてください。
どうかよろしくお願いします。
=====ここから==========================
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var wall = new Array(24);
wall[0] = "./image00.gif";
wall[1] = "./image01.gif";
wall[2] = "./image02.gif";
wall[3] = "./image03.gif";
wall[4] = "./image04.gif";
wall[5] = "./image05.gif";
wall[6] = "./image06.gif";
wall[7] = "./image07.gif";
wall[8] = "./image08.gif";
wall[9] = "./image09.gif";
wall[10] = "./image10.gif";
wall[11] = "./image11.gif";
wall[12] = "./image12.gif";
wall[13] = "./image13.gif";
wall[14] = "./image14.gif";
wall[15] = "./image15.gif";
wall[16] = "./image16.gif";
wall[17] = "./image17.gif";
wall[18] = "./image18.gif";
wall[19] = "./image19.gif";
wall[20] = "./image20.gif";
wall[21] = "./image21.gif";
wall[22] = "./image22.gif";
wall[23] = "./image23.gif";
function bgchange() {
var time = new Date().getHours();
document.body.background = wall[time];
}
// -->
</script>
</head>
<body background="./image00.gif" onload="bgchange();">
:
:
</body>
</html>
====ここまで=====================
追伸・<body background="./image00.gif" onload="bgchange();">~</body>内の「: :」というところには<dody>内容を書き込めばいいんでしょうか。それとも
<body background="./image00.gif" onload="bgchange();">
<body background="./image01.gif" onload="bgchange();">
<body background="./image02.gif" onload="bgchange();">
<body background="./image03.gif" onload="bgchange();">
:
:
<body background="./image24.gif" onload="bgchange();">
とするのでしょうか。
どうか、回答よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
画像のURLがご提示のままで良いものとして…
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
header { height: 4em; }
</style>
<script>
window.addEventListener('DOMContentLoaded', e =>{
let
h = new Date().getHours(),
img = `url("./image${(h>9?"":"0") + h}.gif")`;
document.querySelector('header').style.backgroundImage = img;
});
</script>
</head>
<body>
<header>header</header>
</body>
</html>
No.1
- 回答日時:
<html lang=ja>
<meta charset=utf-8>
<title>サンプル</title>
<script>
addEventListener('DOMContentLoaded', ev=>{
var walls = [...Array(24).keys()].map(i => "./image@.gif".replace(/@/, ('00'+i).substr(-2)));
Array.from(document.querySelectorAll('header')).forEach(e => {
var time = new Date().getHours();
e.style.backgroundImage = "url('@')".replace(/@/, walls[time]);
});
});
</script>
<body>
<header>見出し文</header>
<p>本文</p>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JSPでの画像ファイル表示
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
横並びの画像を3枚時間差でフェ...
-
スワップイメージが上手く動作...
-
jQuery FlexSliderのカルーセ...
-
左○○px、右は残りの幅(100%-左...
-
テキストボックスに入力された...
-
innerHTMLで、表示すると、一部...
-
iframe内のリンクが飛ばないの...
-
Ctrl+F(検索)の窓を出したいの...
-
WEBページ立ち上げ時に1回のみ...
-
jqfloat.jsを複数の画像に適用...
-
HTMLタグに複数のクラスを設定...
-
スタイルシート(CSS)で、高さ...
-
Colorboxがうまく設置できません
-
重なった画像にクリックイベン...
-
オンマウスで、画像切り替え+...
-
動的にHTMLコンテンツを吹き出...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
c++std::string型をTCHARに変換...
-
画面が真っ白になるのはどうして?
-
JSPでの画像ファイル表示
-
Excel VBA マクロ 画像(...
-
HPで写真をクリックすると次の...
-
C言語のポインタ表現
-
このページのように・・・した...
-
onとoffを画像でチェンジ、チェ...
-
<map>の切り替え
-
日替わりで画像を変更したい
-
Litebox v1.0のカスタマイズ方法
-
2箇所の画像をランダムに複数表示
-
外部参照で画像出したいのだが...
-
onMouseで、画像を変更する方法で…
-
IE8でのjavascriptエラーについて
-
フォームに入力された値により...
-
一つのページで二つ動かすのは...
-
文字列型定数2
-
スワップイメージで画像ではな...
-
画像ファイルの合成
おすすめ情報
なお、以下のサイトを参照しました。
http://www9.plala.or.jp/oyoyon/html/script/wall0 …