背景の画像をえらんでもらいましょう

表示の例

画像の見本をクリックすると、背景がその画像にかわります。

※ 残念ながら Netscape では動作しません。

プログラムＡのソースをコピーして、画像の見本を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。

プログラムＡのソース <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"> などの２ヶ所の images/back01.gif が背景の画像のファイル名ですから、あなたの使いたい画像のファイル名にかえてください。

このサイトの場合、画像は images というフォルダに back01.gif から back05.gif までの大きさが同じ画像を保存しています。（よこ30・たて30）

あなたの選んだ画像のサイズに合わせて width="30" height="30" の 30 をかえてください。

プログラムＢのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。

プログラムＢのソース <SCRIPT LANGUAGE="JavaScript"> <!-- function bgChange(myback){  document.body.background=myback; } //--> </SCRIPT>

ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。

５・６年生にもわかるやさしいJavaScriptのTOPへ