[ ホーム ][ イヌでもわかるJavaScript講座 メニュー ]
目次へ戻ります
イヌでもわかるJavaScript講座

Step.50 - アクセス毎に画像を変える


アクセス毎に、大吉、吉、凶のいずれかのイメージを表示する「おみくじ」を作ってみます。


Step テーマ
● 過去Step の おさらい


【実行例】





【リスト】

<img border="0" name="kuji" src="kuji0.gif">
<script type="text/javascript"><!--
myImage = new Array( // 画像ファイル名の設定
"kuji1.gif", // 大吉の画像
"kuji2.gif", // 吉の画像
"kuji3.gif" // 凶の画像
);
myRnd = Math.floor( Math.random() * myImage.length ); // 0〜(画像の数-1)の乱数を求める
document.kuji.src = myImage[myRnd];
// --></script>


サンプルだけの HTMLは こちらへ


【説明】

今回は、「大吉」、「吉」、「凶」の3つのイメージのいずれかを表示するおみくじを作ってみます。

<img border="0" name="kuji" src="kuji0.gif">
この IMGタグの画像を変えます。

myImage = new Array(
"kuji1.gif",
"kuji2.gif",
"kuji3.gif"
);
今回は、「大吉」、「吉」、「凶」の3つの画像を用意しました。


myRnd = Math.floor( Math.random() * myImage.length );
0〜2 の乱数を求めます。
※ 乱数は、Step.14 参照。

document.kuji.src = myImage[myRnd];
myRnd番目の画像へ変更します。
※ 画像変更は、Step.33 参照。

これで、更新するたびに、ランダムにおみくじが表示されました。


サンプルの画像
kuji0.gif kuji1.gif kuji2.gif kuji3.gif
presidentさんが、画像サンプルを作ってくれました。感謝 m(_ _)m


参考ステップ
Step.14 九九の問題に答えてみましょう ※ Math.random、Math.floor
Step.33 マウスカーソルが触れたら画像を変えてみましょう ※ document..src

▲TOP

目次へ戻ります