背景画像を変更

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

クリックで変更：

乗せると変更：

例文

クリックで変更：<a href="javascript:changeBG('kogara_4511L.gif')"> <img src="kogara_4511L.gif" width="32" height="32"></a>
乗せると変更：<img src="kogara_4511L.gif" width="32" height="32" onMouseOver="changeBG('kogara_4511L.gif')">
<form><input type="button" value="リセット" onClick="changeBG('none')"></form>

<script type="text/javascript">
function changeBG(wIMG) {
  document.body.style.backgroundImage = "url(" + wIMG + ")";
}
</script>

解説

クリックで変更の場合、<a>タグを使って、クリックしたときにスクリプトを呼び出し、背景に表示させたい画像のファイル名を送信しています。
乗せると変更の場合、<img>タグの中にマウスを乗せたときに対応するonMouseOverを使って、スクリプトを呼び出しています。
スクリプトでは受け取ったファイル名を表示中のHTMLファイルの背景として設定しています。

応用

上記の例では背景のリセットにボタンを用意しましたが、マウスをどけると背景が元に戻るようにも設定できます。「onMouseOut="changeBG('')"」を<img>タグ内に追加すれば空の画像が背景に設定されて元通りです。しかし、最初の背景に画像を使っている場合は、その画像を指定する必要があります。
スクリプトを次のように手直しすれば、空の文字列を送ると背景が元に戻るようにすることもできます。

function changeBG(wIMG) {
	if (wIMG == "") {wIMG = "default.gif";} //最初の画像を指定
	else {document.body.backgroundImage = wIMG;} //背景を切り替える
}

また、背景を変更すると文字が見難くなりますので、同時に文字色も変更してやると良いかも知れません。
下記スクリプトでは、背景色と文字色を変更しています。

ここにマウスを乗せたりクリックすると色が変わります。

<a href="javascript:changeBG('#777777','#FFFF00')" onMouseOver="javascript:changeBG('#000000','#FFFFFF')" onMouseOut="javascript:changeBG('','')">ここに・・・</a>

function changeBG(wIMG,wText) {
	if (wIMG == "") {wIMG= "#FEFEFE":}
	document.bgColor =wIMG;
	if (wText == "") {wText= "#000000";}
	document.fgColor =wText;
}

リンクの色はdocument.linkColor、リンク中の色（IE非対応）はdocument.alinkColor、リンク済みの色はdocument.vlinkColorで設定できます。

戻る