背景の画像をえらんでもらいましょう
表示の例
 画像の見本をクリックすると、背景がその画像にかわります。
※ 残念ながら Netscape では動作しません。
プログラムAのソースをコピーして、画像の見本を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<table border="0" cellspacing="5" cellpadding="3">
<tr>
<td><a href="#" onClick="javascript:bgChange('images/back01.gif');return false"><img src="images/back01.gif" border="0" width="30" height="30"></a></td>
<td><a href="#" onClick="javascript:bgChange('images/back02.gif');return false"><img src="images/back02.gif" border="0" width="30" height="30"></a></td>
<td><a href="#" onClick="javascript:bgChange('images/back03.gif');return false"><img src="images/back03.gif" border="0" width="30" height="30"></a></td>
<td><a href="#" onClick="javascript:bgChange('images/back04.gif');return false"><img src="images/back04.gif" border="0" width="30" height="30"></a></td>
<td><a href="#" onClick="javascript:bgChange('images/back05.gif');return false"><img src="images/back05.gif" border="0" width="30" height="30"></a></td>
</tr>
</table>
<a href="#" onClick="javascript:bgChange('images/back01.gif');return false"><img src="images/back01.gif" border="0" width="30" height="30"> などの2ヶ所の images/back01.gif が背景の画像のファイル名ですから、あなたの使いたい画像のファイル名にかえてください。
このサイトの場合、画像は images というフォルダに back01.gif から back05.gif までの大きさが同じ画像を保存しています。(よこ30・たて30)
あなたの選んだ画像のサイズに合わせて width="30" height="30" の 30 をかえてください。
プログラムBのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function bgChange(myback){ 
document.body.background=myback;
}
//-->
</SCRIPT>
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ