Javascriptで画像やテキストをランダムに切り替える方法

当サイトの個別記事の上にある画像をアクセスする度に切り替えられれば良いなと思っていて、色々調べてみたところ、JavaScriptで意外と簡単に出来る事がわかったので導入してみました。

このように、3パターンの画像とその下のテキストを用意して、アクセスする度にランダムで切り替わるようになっています。

画像＋テキストの切り替え方法

JavaScriptを書く

当サイトで使用しているJavaScriptをそのまま記載しておきます。JavaScriptは外部ファイル化しています。

jmp = new Array();
img = new Array();
txt = new Array();
txtjmp = new Array();
jmp[0] = "http://afi8.com/a01/";
jmp[1] = "http://afi8.com/a02/";
jmp[2] = "http://afi8.com/a05/";
img[0] = "http://afi8.com/img/ken01.jpg";
img[1] = "http://afi8.com/img/ken02.jpg";
img[2] = "http://afi8.com/img/ken03.jpg";
txt[0] = "賢威のレビューはこちら";
txt[1] = "パワーアフィリエイトのレビューはこちら";
txt[2] = "総合的なSEO対策ツール";
txtjmp[0] = "http://afi8.com/2011/02/22/50/";
txtjmp[1] = "http://afi8.com/2011/02/22/52/";
txtjmp[2] = "http://afi8.com/a05/";
n = Math.floor(Math.random()*jmp.length);
document.write('<a href="'+jmp[n]+'" target="_blank"' + ga +'">');
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
document.write('<a href="'+txtjmp[n]+'">');
document.write("<br />&raquo;"+txt[n]+" ");
document.write("</a>");

jmp＝イメージリンクのURL
img＝イメージファイルのURL
txt＝イメージの下に表示するテキスト
txtjmp＝テキストリンクのURL

イメージのみで良い場合やテキストのみで良い場合は、適宜削除や調整をしてください。

このコードを記述したjsファイルを適当な名前で保存します。当サイトではtopimg.jsという名前で保存しました。

JavaScriptを直接HTMLなどに挿入したい場合には、

<script language="javascript">
上記のコード
</script>

という形で記述すればOKです。

JavaScriptを貼る

サイト内で切り替え画像を表示したい場所に以下のように記述します。

<script language="JavaScript" type="text/javascript" src="http://afi8.com/js/topimg.js"></script>

src=の部分は外部ファイル化したjsファイルのURLとなります。これで訪問するたびに自動的に画像とテキストが切り替わるようになります。更新時や他のページへ移動した場合にも当然切り替わります。

JavaScriptリンクとSEO

GoogleのクローラーはJavaScriptリンクも辿る事ができますので、上記のようなJavaScriptを使ったイメージリンクやテキストリンクでも基本的には認識できる事になります。

しかし、リンクジュースの受け渡しという点では、通常のテキストリンクやイメージリンクとは異なる評価になりますので、SEOを考えるのであればJavaScriptリンクはあまり使用しない方が良いでしょう。私自身は、アフィリエイトリンクでしか使っていません。

»広告をランダムに切り替えるWordPressのプラグイン