ランダムで異なる画像が表示されるスクリプトです。
５枚の画像の内、どれが表示されるかはわかりません。その時の運次第です。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
my_pics=new Array();
//ランダムで表示したい画像を指定する
my_pics[0]='0.gif';
my_pics[1]='1.gif';
my_pics[2]='2.gif';
my_pics[3]='3.gif';
my_pics[4]='4.gif';
function jikan_pic()
{
a=Math.floor(Math.random()*my_pics.length);
document.images["mypic"].src=my_pics[a];
}
//-->
</script>
</head>
<body onLoad="jikan_pic();">
<img src="" name="mypic" width="50" height="50" border="0" alt="サンプル画像">
・
・
・
</body></html>
[ 解説 ]
まず最初に、表示させたい画像を5枚、そして実際に振り分けを行うHTMLを1つ用意します。
用意する画像は、同じ大きさの画像が良いと思います。横幅や高さなどは、
画像加工ソフトなどで揃えておきましょう。
続いて、ソースをご覧下さい。
ソースの上から6〜10行目が画像URLを記入する場所です。
そこに、実際に表示させたい画像URLをご記入下さい。
もしランダムで表示させる画像が5枚以下の場合は、不要な行を削除してください。
その際、必ず下から削除するようにしてください。
例えば、サンプルでは現在画像が5つ設定されていますが、これを4つに減らしたい場合。
以下のようになります。
| 変更前 | 変更後 |
|---|
my_pics=new Array();
my_pics[0]='0.gif';
my_pics[1]='1.gif';
my_pics[2]='2.gif';
my_pics[3]='3.gif';
my_pics[4]='4.gif';
|
my_pics=new Array();
my_pics[0]='0.gif';
my_pics[1]='1.gif';
my_pics[2]='2.gif';
my_pics[3]='3.gif';
|
また、画像を増やしたい場合は、同じ形式の行を増やして画像URLをご記入下さい。
ただし、その際一つ注意点があります。
画像を設定する行の先頭部分には、数字が着いています。
この数字は、1つずつ繰り上がっていっていますね。
行を増やす場合には、同じように数字を繰り上げていく必要があります。
サンプルでは、現在「4」まで数字が割り振られていますから、
ここから更に1行増やした場合、増やした行の先頭の数字は「5」になります。
では、実際に、どのようになるのか見てみましょう。
サンプルに1つ画像を増やす場合、どうなるのか？
以下のソースをご覧下さい。
| 変更前 | 変更後 |
|---|
my_pics=new Array();
my_pics[0]='0.gif';
my_pics[1]='1.gif';
my_pics[2]='2.gif';
my_pics[3]='3.gif';
my_pics[4]='4.gif';
|
my_pics=new Array();
my_pics[0]='0.gif';
my_pics[1]='1.gif';
my_pics[2]='2.gif';
my_pics[3]='3.gif';
my_pics[4]='4.gif';
my_pics[5]='5.gif';
|
スクリプト内の変更出来る箇所は注釈を付けておりますので、変更方法などはそちらをご参照下さい。
（補足）
ページが読み込まれた時、画像が表示される場所に、壊れた画像ファイルを示すマークが表示されます。
これはタグで、画像指定をしていないからです。
タグにて画像指定を行うと、
「指定された画像読み込み」→「スクリプトで設定した画像読み込み」
の2つの画像を読み込みますから、表示速度が遅くなってしまいます。
その為、あえて画像指定を行っていません。
どうしても気になる方は、ソースの下にあるイメージタグに、ダミー画像のURLを指定してください。
そうすれば、最初にダミー画像が表示されて、その後スクリプトで指定した画像が表示されるようになります。
ダミー画像を指定される時は、出来るだけサイズの小さいものを使用しましょう。
サイズが大きいと読み込みに時間がかかってしまいます。
|
