背景の色をえらんでもらいましょう
表示の例
 色の見本をクリックすると、背景がその色にかわります。
プログラムAのソースをコピーして、色の見本を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<table border="0" cellspacing="5" cellpadding="3">
<tr>
<td bgcolor="#FCF49C"><a href="#" onClick="javascript:bgchange('#FCF49C');return false"><img src="images/30-30.gif" border="0" width="30" height="30"></a></td>
<td bgcolor="#BCF47C"><a href="#" onClick="javascript:bgchange('#BCF47C');return false"><img src="images/30-30.gif" border="0" width="30" height="30"></a></td>
<td bgcolor="#8CD0F4"><a href="#" onClick="javascript:bgchange('#8CD0F4');return false"><img src="images/30-30.gif" border="0" width="30" height="30"></a></td>
<td bgcolor="#C49CF4"><a href="#" onClick="javascript:bgchange('#C49CF4');return false"><img src="images/30-30.gif" border="0" width="30" height="30"></a></td>
<td bgcolor="#F494D4"><a href="#" onClick="javascript:bgchange('#F494D4');return false"><img src="images/30-30.gif" border="0" width="30" height="30"></a></td>
</tr>
</table>
このプログラムでは、images/30-30.gif というダミーの画像を使っています。上の色の見本のひとつでマウスを右クリックして、あなたのホームページの画像ファイル内に「名前を付けて画像を保存」してください。(853バイトです)
そしてプログラムAの src="images/30-30.gif" の images/30-30.gif をあなたの保存したファイル名にかえてください。このサイトの場合、画像は images というフォルダに 30-30.gif というファイル名で保存してあります。
色の見本については、あなたのページの背景色に使いたい色にかえてみてください。
<td bgcolor="#FCF49C"><a href="#" onClick="javascript:bgchange('#FCF49C');return false">
などの2ヶ所の #FCF49C をあなたの好きな色にかえてください。
プログラムBのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function bgchange(colorCode){ 
document.bgColor=colorCode;
}
//-->
</SCRIPT>
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ