ページが表示されるたびに画像をかえてみよう
表示の例
 ボタンを押すとウインドウが開き、ページが表示されるたびに画像がかわります。
プログラムAのソースをコピーして、画像を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
simg=new Array(5);
simg[0]="images/icons1.gif";
simg[1]="images/icons2.gif";
simg[2]="images/icons3.gif";
simg[3]="images/icons5.gif";
simg[4]="images/icons8.gif";
Myimg=Math.floor(5*Math.random());
document.write("<center><img src='"+simg[Myimg]+"'></center>");
//-->
</SCRIPT>
プログラムAの4行目から8行目に、表示される画像のファイル名が書いてあります。例では5つの画像が不特定に選ばれます。
simg[0]="images/icons1.gif"; などの images/icons1.gif をあなたの表示させたい画像のファイル名にかえてください。
例では simg[0] から simg[4] まで、5つの画像が設定してあります。さらに画像の数を増やす場合には、simg[5] 、simg[6] 、というようにソースの追加をしてください。その場合には、プログラムAのソースの simg=new Array(5); と Myimg=Math.floor(5*Math.random()); のところの 5 を画像の数にかえてください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
画像にリンクを設定する場合
画像にリンクを設定する場合のソースは下のようになります。画像を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
リンクを設定する場合のソース
<SCRIPT LANGUAGE="JavaScript">
<!--
img=new Array(5);
img[0]="<a href='java_gazou4-1.html'><img border='0' src='images/icons1.gif' width='32' height='32'></a>";
img[1]="<a href='java_gazou4-2.html'><img border='0' src='images/icons2.gif' width='32' height='32'></a>";
img[2]="<a href='java_gazou4-3.html'><img border='0' src='images/icons3.gif' width='32' height='32'></a>";
img[3]="<a href='java_gazou4-4.html'><img border='0' src='images/icons5.gif' width='32' height='32'></a>";
img[4]="<a href='java_gazou4-5.html'><img border='0' src='images/icons8.gif' width='32' height='32'></a>";
imgNo=Math.floor(5*Math.random());
document.write(img[imgNo]);
//-->
</SCRIPT>
img[0]="<a href='java_gazou4-1.html'><img border='0' src='images/icons1.gif' width='32' height='32'></a>"; などのところで、画像とそのリンク先を設定しています。
リンク先は java_gazou4-1.html などを、画像ファイル名は images/icons1.gif などをあなたの表示させたい画像とリンク先のファイル名にかえてください。
この images/icons1.gif は大きさが、よこ32ピクセル、たて32ピクセルの画像ですから、width="32" height="32" となっています。この 32  32 は、あなたの選んだ画像の大きさにかえてくださいね。
例では img[0] から img[4] まで、5つの画像が設定してあります。さらに画像の数を増やす場合には、img[5] 、img[6] 、というようにソースの追加をしてください。その場合には、プログラムAのソースの img=new Array(5); と imgNo=Math.floor(5*Math.random()); のところの 5 を画像の数にかえてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ