img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

背景画像変更


任意の要素の背景画像を変更する

  ie6 nn7 op8

素材配布サイトなどで、文字や画像をイメージし易いように使われるJavaScriptです。
色んな記述の仕方が有りますが、当サイトで使っている変更方法です。

先ず、変更する要素に id を振っておきます。
<div id="任意のid名">変更するボックス</div>

上記ではdiv要素に任意のidを付けています。
このid名の付いたボックスの背景を変更する場合、下記のようにJavaScriptを記述して下さい。

ボタンの場合:
<input type="button" value="ボタンに表示する文字" onclick="document.getElementById('任意のid名').style.backgroundImage='url(画像のurl)'; return false;">

画像の場合:
<a href="#" onclick="document.getElementById('任意のid名').style.backgroundImage='url(画像のurl)'; return false;"><img src="画像のurl" width="横幅" height="高さ" border="0"></a>

例: <div id="sample-box">

ボタンの場合 <input type="button" value="ボタンに表示する文字" onclick="document.getElementById('sample-box').style.backgroundImage='url(画像のurl)'; return false;">
ボタン 

画像の場合 <a href="#" onclick="document.getElementById('sample-box').style.backgroundImage='url(画像のurl)'; return false;"><img src="画像のurl" width="横幅" height="高さ" border="0"></a>
画像  画像 div等ブロック要素の背景を変更(2)

</div>

Background-image *DivReset*



bodyの背景画像を変更する

  ie6 nn7 op8

文書の本体であるbody要素の背景画像を変更するJavaScriptです。
これも素材配布サイトでよく使うJavaScriptです。
以下をhtmlの必要な場所にに入れてください。

ボタンの場合:
<input type="button" value="ボタンに表示する文字" onclick="document.body.style.backgroundImage='url(画像のurl)'; return false;">
ボタン 

画像の場合:
<a href="#" onclick="document.body.style.backgroundImage='url(画像のurl)'; return false;"><img src="画像のurl" width="横幅" height="高さ" border="0"></a>
画像  画像 Bodyの背景を変更(2)

Background-image *BodyReset*