HTML(タグ)の基礎のブログ版です。ホームページを作成するためのタグなどについてのFAQを主に解説しています。徐々に足していきます。
主に頂いたお便りからの回答を元に作成していますが、もしかすると私が誤った回答をしているばあいもありますので、気づかれた方はお知らせいただけますと助かります。
SELECTED ENTRIES
ここから下はこのFAQブログ内ではなく、自サイトのHTMLの基礎のほうへリンクしています。FAQではなく要素などの意味や使い方を調べたい、と言う方は以下からリファレンスの方へ飛ぶ事ができます。
HTMLの基礎:目的別
HTMLの基礎:タグ別
※下記のものは主なタグだけです。他にも掲載しています。
サイト概要
<< 背景画像の繰り返しや位置を指定したい |main | 新ウィンドウを開く際のオプションの指定 >>

更新するたびに画像をランダムに表示

「更新を押すごとに画像をランダムに表示させたい」
・・HTMLに関しての質問ではないのですが、割と多くいただく質問の中の一つです。 これはjavascriptを使用して簡単に実現させる事ができます。

この方法では画像でなくテキストなどもランダム表示させる事ができます。 以下では外部ファイルにjavascriptを記述する方法を解説しています。

まず、「aaa.js」というjavascriptのファイルを作成します。「.js」というのは javascriptの拡張子です。そのファイル内に、以下のソースを記述してみます。 (img要素内のwidthやborderなどの属性は、サンプルを見難くするので省いています。適度付け足してください)

line = 3;
mes = new Array(3);
mes[0] ='<img src="画像URL">';
mes[1] ='<img src="画像URL">';
mes[2] ='<img src="画像URL">';
Rnd = Math.floor(Math.random()*line);
document.write(mes[Rnd]);

上記のソースは3つの画像をランダムに表示させる方法です。 もし4つの画像をランダム表示させたいならば、

line = 4;       ←ここと
mes = new Array(4);  ←ここの数字と、
mes[0] ='<img src="画像URL">';
mes[1] ='<img src="画像URL">';
mes[2] ='<img src="画像URL">';
mes[3] ='<img src="画像URL">';  ←ここを1列増やします。
Rnd = Math.floor(Math.random()*line);
document.write(mes[Rnd]);

<img src="画像URL">の部分をテキストに置き換えれば、ブラウザウィンドウを更新させるたびに 、記述された文字の中からランダムに表示させる事ができます。

上記のソースを記述したファイルと、その画像やテキストを表示させるファイルは 同じディレクトリ(同じフォルダ)において下さい。書くほどの事でもないですが・・ そして、HTML文書内の表示させたい箇所に以下のjavascriptのコードを記述します。

<script language="JavaScript" src="aaa.js"></script>

これで間違いがなければ上手く表示されます。 (表示されません、といわれた事があったのですが、それは画像のパスを誤って記述していただけでした。) なお、上記のjavascriptの画像やテキストを書いた列はいくらでも増やす事ができます。

| 2006.03.28 Tuesday | ykr414 | FAQ【javascript関連】 | - |
url: http://ykr414.ykr.main.jp/trackback/22