全てのBlogPetをサイドバーでランダム表示

The blog of H.Fujimotoさまの「BlogPetのランダム表示JavaScript(改良版)」を導入しました。
全てのペットがランダムに表示される優れものです。
1回に表示するBlogPetは1匹なので、サイドバーが重くならずにすみます。
また、特定のペットを表示するリンクもついているので、見たい動物がすぐに見られます。

手順は以下の通りです。

1.まずスクリプトをコピーします。
私は上手く動かなかったので、以下の4行を削除しました。

最初の2行。

<script language="JavaScript" type="text/javascript" charset="UTF-8">
<!--

最後の2行。

//-->
</script>

すると以下のようになります。

var idarray = new Array("1匹目のID", "2匹目のID", "3匹目のID", "4匹目のID", "5匹目のID"); var interval = 20000;

var id, num, oldnum, timer_id;
oldnum = -1;
random_pet();
if (interval > 0) {
timer_id = setInterval('random_pet()', interval);
}

function random_pet()
{
do {
num = Math.floor(Math.random() * idarray.length);
} while (num == oldnum)
oldnum = num;
show_pet();
}

function next_pet()
{
num++;
if (num == idarray.length) num = 0;
if (interval > 0) {
clearInterval(timer_id);
timer_id = setInterval('random_pet()', interval);
}
show_pet();
}

function prev_pet()
{
num--;
if (num == -1) num = idarray.length - 1;
if (interval > 0) {
clearInterval(timer_id);
timer_id = setInterval('random_pet()', interval);
}
show_pet();
}

function select_pet(pet_no)
{
num = pet_no;
if (interval > 0) {
clearInterval(timer_id);
timer_id = setInterval('random_pet()', interval);
}
show_pet();
}

function show_pet()
{
var today=new Date();
var tseconds=today.getSeconds();
var id = idarray[num];

pethtml = "<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='wmode' value='transparent' /><param name='quality' value='high' /><param name='FlashVars' value='username=" + id + "&tseconds="+tseconds+"' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' wmode='transparent' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=" + id + "&tseconds="+tseconds+"' /></object>\n";
pethtml += "<img src='http://www.blogpet.net/add_log.php?username=" + id + "&url="+document.URL+"&referrer="+document.referrer+"'>";
document.getElementById('blogpet').innerHTML = pethtml;
}

【追記】
壱さまに留守番背景対応化のアドバイスを頂きました。
スクリプトの赤字部分を追加します。

2.「var idarray = new Array(」に、自分の飼っているペットのIDを記述します。
ペットのIDは、呼び出しスクリプトの「1234567890.js」の部分です。

3.「var interval =」で、ランダム表示する間隔を設定します。
例えば「30000」にしておくと、ページ表示中も30秒ごとに表示が変わります。
私は重くなるので、ページ中はランダムにしない（=0）に設定しました。

4.設定したファイルに名前をつけて保存し、アップロードしておきます。
私は「randompet.js」にしました。

5.サイドバーに呼び出し部分を記述します。

<div id="blogpet"></div>

私は留守番背景があるので、以下のようになります。
（留守番背景がサーバダウン時に表示されるかは、テスト中です。）

<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td><div id="blogpet"></div></td></tr></table>

【追記】
壱さまにアドバイスを頂き、以下のように変更しました。

<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td id="blogpet"></td></tr></table>

6.個別のペットを表示するリンクを記述します（任意）。

<a href="javascript:select_pet(0);">ポテチ</a>/
<a href="javascript:select_pet(1);">ころた</a>/
<a href="javascript:select_pet(2);">紫苑</a>/
<a href="javascript:select_pet(3);">みゅうみゅう</a>

7.手順4でアップロードしたスクリプトを、呼び出す記述をします。
この記述は手順5より後ろに書かないと、エラーが出るようです。

<script language="JavaScript" type="text/javascript" src="ランダムスクリプトURL" charset="UTF-8"></script>

全てのBlogPetを表示するには、タブを使う方法もあります。

【2005.4.6　追記】
個別ペット呼び出しリンクに、BlogPetのミニアイコンを追加しました。

【2005.11.1　追記】
留守番背景はやはり隠れてしまうようなので、外しました。

【2006.08.15　追記】
留守番背景がないと、WinShotで「コントロール/クライアント」指定が出来ないようです。
手順5に留守番背景を戻しました。

<div id="blogpet"><img src="留守番背景URL" alt="留守番背景" title="留守番背景" width="127" height="196" /></div>