表示

basic.gif (3042 バイト)

 背景を切り替えよう IE.gif (941 バイト)4.0以上

今回は背景を入れ替える命令をやってみよう。
JavaScriptでも背景の色を変えることは出来たね。でも背景の画像を変えることは出来なかったよね。
(※BODY内を操作することによってある程度はできる。)
DHTMLでは背景の画像も動的に変えることができるんだ。

document.body.background = "■";・・・・・背景の画像のURLを■に変える
■:背景にしたい画像のURL

いままで、いろいろと指定してくるときにはidというものを使って指定してきた。
今回は背景なので、このページ自体を操作するね。
なので、今回はidの場所にdocumentというものが入るんだよ。
つまり、
document.body.background ⇒ document(ページ?)のBODYのBACKGROUND
という感じにとっておこう。

じゃあ、プログラムを作ってみよう。

<input type="button" value="HTMLの背景" onclick="document.body.background='../../html/image/back/back2.gif'"><p>  ←それぞれの背景を指定
<input type="button" value="スタイルシートの背景" onclick="document.body.background='../../css/image/back.gif'"><p>
<input type="button" value="DHTMLの背景" onclick="document.body.background='../image/dhtml_back.gif'"><p>

これを実行すると、

↑ボタンを押してみよう背景画像が変わるよ

ほらね、簡単に出来たでしょ。


back.gif (1116 バイト) 画像を切り替えよう
next.gif (705 バイト) ボタンのテキストを自由に変えよう