素材の壺

画像のランダム表示〜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」の3種類のうちいずれかがランダムで表示されるようになります。種類を増やしたい場合は
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です。


【サンプル】

※ページを更新するとランダムに画像が切り替わります。

コメント(4)

使用させて頂きました。

どちらの書き方も同じように表示されましたが、要は一番下に書かれたサンプルで良いって事ですか?
1ヶ所に書いてある方が分かりやすい気もしました。

>>hogeさんへ

この例だと一カ所のみ表示させるので、確かにむしろ一番下に書いたサンプルで良いと思います。

複数箇所に表示させるような場合であれば、ヘッダー部分は外部化して表示させたい部分にだけ
document.write(pic[picNo]);
を記述すればOKなので、スッキリするかと思います。

そうする事でプログラムとデザインの分離も出来るので、ケースバイケースでの使用をおすすめします。

がいど

画像タグゎどこにいれますか?

コメントする

名前
電子メール
URL
コメント
サイト内検索
TOP利用規約リンクについてお問い合わせ│相互リンク[ 素材1 ][ 素材2 ][ 素材3 ][ HP制作 ]│
無料アフィリエイトツール「アフィーノ」