画像や広告の複数表示は?JavaScriptでランダムに出す方法

複数の画像や広告をランダムで表示させたいと、思ったことはありませんか?

JavaScriptを使えば、ランダムに表示できます。

こうすることで、訪問者個別に違った見せ方ができます。

特に、同じ広告が表示されると、つまらないと思いますので、アクセスのたびに内容を変えたほうが、新鮮さがあっていいと思います

最後に、応用編として、パソコンとスマートフォンに分けてランダムに画像を表示させます。

スポンサーリンク

サンプル動作

3枚の画像の中から一つ表示します。

ソース

/* 画像のタグを配列に表示 */
var img = new Array();
	img[0] = '<img src="/wp-content/uploads/2017/02/20170204190350.png" alt="サンプル画像1">';
	img[1] = '<img src="/wp-content/uploads/2017/02/20170204190523.png" alt="サンプル画像2">';
	img[2] = '<img src="/wp-content/uploads/2017/02/20170204190554.png" alt="サンプル画像3">';

/* 画像をランダムに表示させる関数 */
function img_random(){
  num = Math.floor( Math.random() * 3);
  document.write(img[ num ]);
}

[javascript.js]

配列に画像タグを入れてランダム表示させる関数で表示させています。

また、シングルクォーテーション「’」、 ダブルクォーテーション「”」に注意します。

 [<img src=url>] 

 [<img src=url>] 

タグを貼り付けるときは、どちらかに統一させます。

 [<img src=url>] 

は使えません。

特に広告タグはダブルクォーテーション「”」がほとんどなので、広告タグを囲むときはシングルクォーテーション「’」を使います。

【応用編】パソコンとスマートフォン(iPad)で分ける

JavaScriptでパソコンとモバイルでメッセージを変える方法』の記事から、応用してパソコンとスマートフォンで、出したい画像を分けてランダムに表示させます。

サンプル

上のプログラムと同じよう感じですが、パソコンとスマートフォンで分けて3枚の画像をランダムで一つ表示させてます。

パソコンで見ると、先ほどの画像と同じものが表示されます。

スマートフォンではこのような画像3枚のうち、1枚が表示されます。

ソース(応用)

/* 画像のタグを配列に表示 */
var img = new Array();
	img[0] = '<img src="/wp-content/uploads/2017/02/20170204190350.png" alt="サンプル画像1">';
	img[1] = '<img src="/wp-content/uploads/2017/02/20170204190523.png" alt="サンプル画像2">';
	img[2] = '<img src="/wp-content/uploads/2017/02/20170204190554.png" alt="サンプル画像3">';

/* スマホ用画像のタグを配列に表示 */
var imgsp = new Array();
	imgsp[0] = '<img src="/wp-content/uploads/2017/02/20170204190844.png" alt="サンプルスマホ画像1">';
	imgsp[1] = '<img src="/wp-content/uploads/2017/02/20170204190929.png" alt="サンプルスマホ画像2">';
	imgsp[2] = '<img src="/wp-content/uploads/2017/02/20170204191004.png" alt="サンプルスマホ画像3">';

var usag = navigator.userAgent;

/* PCとスマホに分けて、画像をランダムに表示させる関数 */
function imgsp_random(){
  if ((usag.indexOf('iPhone') > 0 || usag.indexOf('iPad') > 0) || usag.indexOf('iPod') > 0 ||usag.indexOf('Android') > 0){
    num = Math.floor( Math.random() * 3);
    document.write(imgsp[ num ]);
  }
  else{
    num = Math.floor( Math.random() * 3);
    document.write(img[ num ]);
  }
}

上に同じく、[javascript.js]の外部ファイルで、関数を呼び出しています。

これを使うと、例えば、パソコンの広告とスマートフォンの広告を分けて、ランダムで表示できます。

まとめ

サクッとですが、説明しました。

広告などを複数ランダム表示させるとき、数が多くなると[list.js]、[javascript.js]のように配列と関数でファイルを分けると管理しやすいです。

もし、「表示」の下にリンクなどあってワンテンポ遅れて表示すると、誤操作になるかもしれないで、表示させるもののサイズを統一させたほうがいいかと思います。

スポンサーリンク

当ブログのレンタルサーバーは『mixhost』で運営してます。

フォローする

スポンサーリンク