WEB制作テクニック

マウスクリックで背景を変更する

画像をクリックすると背景が変わります。



以下はソースです。灰色の部分が説明です。
全文をコピー＆ペーストでもご使用頂けます。 
<SCRIPT language="JavaScript">
	<!--
	function bcgChange(bcgName){
	document.body.background = bcgName;
	}
	//-->
</SCRIPT>


<!--以下body部分の画像タグ//-->
<a href="javascript:bcgChange('画像のURL1')">
	<img src="画像のURL1" width="画像のwidth" height="画像のheight" border="0">
</a>
<a href="javascript:bcgChange('画像のURL2')">
	<img src="画像のURL2" width="画像のwidth" height="画像のheight" border="0">
</a>

解説
1.script部分はユーザー関数を作成し、引数が背景になるように設定しています。
2.body部分はLinkタグのアドレス部分をjavascript:ユーザー関数とすることによってユーザー関数を呼び出しています。
　引数の部分に画像のアドレスを入れ、スクリプト内の背景を変更する部分に画像のアドレスを渡しています。
3.imgタグは通常のものと同じです。

※注意！CSSでページ全体の背景を設定している場合、このスクリプトは使用できません。


上へ