#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › change bg-img

Change background-image

背景画像変更

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

先ず、変更する要素に任意のidを付けておきます。

<div id="任意のid">変更するボックス</div>

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


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


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

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

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

画像の場合:
<a href="javascript:void(0)" onclick="document.getElementById('sample-box').style.backgroundImage='url(画像のurl)'; return false;">
<img src="画像のurl" width="横幅" height="高さ" alt="画像の名前"></a>

画像 ← divの背景を変更(2)

</div>

Background-image *DivReset*

BODYの背景画像を変更する

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

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

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

Background-image *BodyReset*