imgタグの画像を動的に変更

JavaScriptを使って、imgタグのsrcを動的に変更し画像を入れ替えます。
ソースコードは以下です。説明のコメント付きです。

<form>
	<!-- 画像変更用のradioボタン
		radioボタンをクリックすると、onclick()が実行されて、change_image()が呼び出されます。
		change_image()の引数に指定したファイル名で、imgタグの画像ファイル名を変更します。
	 -->
	<input type="radio" name="text" onclick="change_image('bg_red.png')"><span>レッド</span>
	<input type="radio" name="text" onclick="change_image('bg_pink.png')"><span>ピンク</span>
	<input type="radio" name="text" onclick="change_image('bg_orange.png')"><span>オレンジ</span>
	<input type="radio" name="text" onclick="change_image('bg_green.png')"><span>グリーン</span>
	<input type="radio" name="text" onclick="change_image('bg_blue.png')"><span>ブルー</span>

	<!-- 画像表示用のimgタグ -->
	<img name="imgbg" src='img/bg_red.png'>

	<!-- imgタグのsrcを変更するタグスクリプト
		ドキュメント内のname="imgbg"が設定されたタグのsrcを変更することで、imgタグの画像を変更してます。
	 -->
	<script type="text/javascript">
		function change_image(imgsrc){ document.imgbg.src=imgsrc;}
	</script>
</form>

雑記

Posted by きむら