美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っていますウウツボグサの写真

Javascriptで画像をランダムに切り替えて表示する方法

Filed under: Home Page — タグ: javascript, ホームページ作成 — daii @ 2:58 PM

2010年8月29日

ホームページのJavascriptで画像をランダムに切り替えて表示する方法を試行錯誤していましたら、うまく表示できるようになったので紹介します。ページにアクセスする毎に画像ファイルが違ってなかなか良い感じにすることができましたが、私はPHPの方を使っています。

前回はPHPでしたが、PHPの使えない環境では、Javascriptを使って同じような動作をさせることができます。

<script type="text/javascript">
<!--
var max_no = 3; //画像の最大数
var rand_no = Math.floor(Math.random() * max_no);

if(rand_no == 0){
document.write('<img src="http://hogehoge.jp/***/img1.jpg" alt="img1の代替テキスト" title="img1の説明" />');
}
else if(rand_no == 1){
document.write('<img src="http://hogehoge.jp/***/img2.jpg" alt="img2の代替テキスト" title="img2の説明" />');
}
else if(rand_no == 2){
document.write('<img src="http://hogehoge.jp/***/img3.jpg" alt="img3の代替テキスト" title="img3の説明" />');
}//-->
</script>
<noscript><img src="http://hogehoge.jp/***/img1.jpg" alt="img1の代替テキスト" title="img1の説明" style="margin:0" /></noscript>

Javascriptでは画像の数に応じて、セットする画像の枚数を設定してから、PHPの時と同様に、画像の情報を記録した行を追加してやります。

JavascriptではJavascriptが使えない環境にも配慮する必要があります。noscriptタグで表示する画像を指定します。

Comments (2)

Google Analyticsのトラッキングコードを外部ファイルにする

Filed under: Home Page — タグ: javascript, SEO, ホームページ作成 — daii @ 12:45 PM

2010年6月24日

Google Analyticsのトラッキングコードとは

Google Analyticsはサイトのアクセス解析には簡単で便利なものです。Google Adsenseの解析にも使えます。このトラッキングコードは以前はHTMLのbodyの最後に挿入するようになっていましたが、最近確認すると、headタグの最後に入れるようになっています。トラッキングコードは次のようなものです。

<script type="text/javascript">

? var _gaq = _gaq || [];
? _gaq.push(['_setAccount', 'UA-XXXXX-X']);
? _gaq.push(['_trackPageview']);

? (function() {
? ? var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
? ? ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
? ? var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
? })();

</script>

Google Analyticsのトラッキングコードを外部ファイルにして読み込む

そこでヘッドタグの最後に入れてみましたが、コードを見るとヘッドタグの中がゴチャゴチャしていて見にくいようです。よく見るとこれはJavascriptそのものです。先日external.jsをヘッドタグ内に読み込むようにしたばかりなので、この中にトラッキングコードも入れてみたらどうかと、実験してみました。結果は問題なくアクセス解析が行われているようです。

外部ファイルにする時は次のようにscriptタグを取り除いて、既存のファイルの次に追加します。このようにするとファイルを読み込む時間も短縮できるはずです。SEOにも良いはずです。

? var _gaq = _gaq || [];
? _gaq.push(['_setAccount', 'UA-XXXXX-X']);
? _gaq.push(['_trackPageview']);

? (function() {
? ? var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
? ? ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
? ? var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
? })();

Google Adsenseのトラッキングコードも外部ファイルに追加

別サイトやサブドメインで運用しているGoogle Adsenseのトラッキングコードを追加する場合は同様にコードを追加します。

window.google_analytics_uacct = "UA-XXXXX-X";

Comments (2)