ページに任意の画像をランダム表示させる

あっという間の9月でした。
今年もあと3ヶ月なんて・・・信じられないくらい毎日が早い気がします。

さて今日は、タイトル通りの「任意の画像をランダムに表示させる」Javascriptです。
ほとんど自分用のメモです^^; 結構忘れてしまいがちなので・・・。

個人・商用ホームページを問わず、シンプルなデザインだと
再訪するユーザーに飽きられてしまうこともあると思います。

またはアフィリエイトやドロップシッピング用のサイトで
広告バナーが増えすぎて1ページのボリュームが増えすぎて困る方にも、
ページを更新するたびにバナー広告がランダムに切り替わると
ユーザーに新鮮な印象を与えることができるかもしれません。

ちょっとしたJavascriptを追加すればOKです。

まずはHTMLソースに追加するタグは

<script language="JavaScript">
<!--
bbad=new Array();
bbad[<span style="color: #ff0000;">0</span>]='<img src="■■■" />';
bbad[<span style="color: #ff0000;">1</span>]='<img src="■■■" />';
bbad[<span style="color: #ff0000;">2</span>]='<img src="■■■" />';
i=Math.floor(Math.random()*bbad.length);
document.write(bbad[i]);
// -->
</script>

“■■■”の部分は使用する画像のURLになります。
画像にリンクを張る場合は・・・

bbad[<span style="color: #ff0000;">0</span>]='<a href="リンク先URL"><img src="■■■" /></a>';

画像URLにリンクタグを追加すればOKです。
アフィリエイトバナー広告などにも応用できますね^^

ちなみに。
[0] となっている数を順に増やしていくことで、ランダムさせたい画像を増やしていくこともできます。
まぁ、あまり多くなりすぎるとちょっとソースがダラダラと長くなってしまいますが、ひとまずこれで。

私自身、ちょっと調整してから外部Javascript化していきたいと思います。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です