画像のランダム表示〜javascript
画像のランダム表示〜javascript
アクセスするごとに表示させる画像を変化させるjavascript。アフィリエイトなどでも使用できるので、ユーザーを飽きさせない工夫として利用できます。
【ソース】
『<head>〜</head>内に記述』
<script type="text/javascript">
<!--
pic=new Array(3);
pic[0]="<img src='../img/bn_test1.jpg' alt='' />";
pic[1]="<img src='../img/bn_test2.jpg' alt='' />";
pic[2]="<img src='../img/bn_test3.jpg' alt='' />";
picNo = Math.floor(Math.random() * 3);
-->
</script>
『画像を表示させたい場所に記述』
<script type="text/javascript">
<!--
document.write(pic[picNo]);
-->
</script>
上記のように記述すると「bn_test1.jpg」「bn_test2.jpg」「bn_test3.jpg」の３種類のうちいずれかがランダムで表示されるようになります。種類を増やしたい場合は
pic[3]=〜
pic[4]=〜
というように増やし、それに合わせて
pic=new Array(5);
picNo = Math.floor(Math.random() * 5);
というように数字の合計を修正します。
見ての通りタグをそのまま出力しているだけのシンプルなものなので、画像ではなくテキスト等でも使用できます。
※数字は0から記述するため、上記の例だと0〜4で合計5つ、という数え方です。
※画像ファイル名は適宜変更して下さい。
※<img>タグの中はシングルクォート( ' )で記述しましょう。
ブログで使用する場合は画像を表示したい場所に
<script type="text/javascript">
<!--
pic=new Array(3);
pic[0]="<img src='../img/bn_test1.jpg' alt='' />";
pic[1]="<img src='../img/bn_test2.jpg' alt='' />";
pic[2]="<img src='../img/bn_test3.jpg' alt='' />";
picNo = Math.floor(Math.random() * 3);
document.write(pic[picNo]);
-->
</script>
と、まとめて記述すればOKです。
【サンプル】
※ページを更新するとランダムに画像が切り替わります。
使用させて頂きました。
どちらの書き方も同じように表示されましたが、要は一番下に書かれたサンプルで良いって事ですか？
１ヶ所に書いてある方が分かりやすい気もしました。
>>hogeさんへ
この例だと一カ所のみ表示させるので、確かにむしろ一番下に書いたサンプルで良いと思います。
複数箇所に表示させるような場合であれば、ヘッダー部分は外部化して表示させたい部分にだけ
document.write(pic[picNo]);
を記述すればOKなので、スッキリするかと思います。
そうする事でプログラムとデザインの分離も出来るので、ケースバイケースでの使用をおすすめします。
がいど
画像タグゎどこにいれますか？