タブ切り替えで全てのBlogPetをサイドバーに表示

BlogPetの広場に表示していたペットたちを、タブを使ってサイドバーに表示するようにしました。
[あ] UnderDone(あんでるどん)さまの「複数のBlogPetをサイドバーに飼う方法」を参考にさせていただきました。

まず、以下の記述をCSSに追加します。
枠線の色は「#DB7093」を、非表示のタブの背景色は「#FFF2FA」になっています。
変えたい場合は、好きな色コードに置換してください。

.tabheader TABLE {
BORDER-COLLAPSE: collapse; border-spacing: 0
}
.tabheader TABLE TR TD {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
.tabheader .close {
BORDER-RIGHT: #DB7093 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #DB7093 1px solid; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 0px; BORDER-LEFT: #DB7093 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #DB7093 1px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: #FFF2FA
}
.tabheader .open {
BORDER-RIGHT: #DB7093 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #DB7093 1px solid; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 0px; BORDER-LEFT: #DB7093 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #fff 1px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: white
}
.tabheader .spc {
BORDER-RIGHT: #fff 0px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN: 0px; BORDER-LEFT: #fff 0px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #DB7093 1px solid; WHITE-SPACE: nowrap
}
.tabheader A {
TEXT-DECORATION: none
}
.tabbody {
BORDER-RIGHT: #DB7093 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #DB7093 0px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #DB7093 1px solid; PADDING-TOP: 1em; BORDER-BOTTOM: #DB7093 1px solid
}

次に処理部のスクリプトをコピーします。

<SCRIPT language=JavaScript>
<!--
// bpref = tab body prefix, hpref = tab header prefix
function seltab(bpref, hpref, id_max, selected) {
if (! document.getElementById) return;
for (i = 0; i <= id_max; i++) {
if (! document.getElementById(bpref + i)) continue;
if (i == selected) {
document.getElementById(bpref + i).style.visibility = "visible";
document.getElementById(bpref + i).style.position = "";
document.getElementById(hpref + i).className = "open";
} else {
document.getElementById(bpref + i).style.visibility = "hidden";
document.getElementById(bpref + i).style.position = "absolute";
document.getElementById(hpref + i).className = "close";
}
}
}
// -->
</SCRIPT>

最後に、表示部を記述します。
タブの名前は、お好きなものに変えてください。
また私のタブの内容は、留守番背景対応になっています。
留守番背景を設定しない方は、BlogPetの呼び出しコードをそのままコピーしてください。

<DIV class=tabheader>
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=head1><A
href="javascript:seltab('box',%20'head',%2010,%201)">みゅみゅう</A> </DIV></TD>
<TD>
<DIV class=spc> </DIV></TD>
<TD>
<DIV id=head2><A
href="javascript:seltab('box',%20'head',%2010,%202)">ポテチ</A> </DIV></TD>
<TD>
<DIV class=spc> </DIV></TD>
<TD>
<DIV id=head3><A
href="javascript:seltab('box',%20'head',%2010,%203)">ころた</A>
</DIV></TD></TD>
<TD>
<DIV class=spc> </DIV></TD>
<TD>
<DIV id=head4><A
href="javascript:seltab('box',%20'head',%2010,%204)">紫苑</A> </DIV></TD>
<TD width="100%">
<DIV
class=spc> </DIV></TD><!-- ↑この 100% が重要。試しに消してみよう! --></TR></TBODY></TABLE></DIV><!-- タブの中味です -->
<DIV class=tabbody>
<DIV id=box1>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td><script language="JavaScript" type="text/javascript" src="BlogPetスクリプトURL" charset="UTF-8"></script></td></tr></table>
</DIV>
<DIV id=box2>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td><script language="JavaScript" type="text/javascript" src="BlogPetスクリプトURL" charset="UTF-8"></script></td></tr></table>
</DIV>
<DIV id=box3>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td><script language="JavaScript" type="text/javascript" src="BlogPetスクリプトURL" charset="UTF-8"></script></td></tr></table>
</DIV>
<DIV id=box4>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td><script language="JavaScript" type="text/javascript" src="BlogPetスクリプトURL" charset="UTF-8"></script></td></tr></table>
</DIV></DIV>

<script language="JavaScript">
<!--
seltab('box', 'head', 10, 1);
// -->
</script>

タブを使えば、留守番背景の記述もそのまま使えるのがいいですね。
The blog of H.Fujimotoさまの「BlogPetのランダム表示JavaScript」では、留守番背景は使えないような気がしていたので。
そのかわり4つ表示してしまうので、サイドバーが重くなるのは必定ですね。
その点はランダム表示の方が軽くて済みます。

表示に耐えないほど重くなるかどうか、様子を見ようと思います。
それからタブの大きさに合わせて、サイドバーを太くしてみました。
みなさまの感想もお聞かせください。

【2005.2.18　追記】
サイドバーでは重いようなので、BlogPetの広場に移動しました。
本文に記述すると<p>タグが入って上手く動かないので、<iframe>で表示しています。
最初縦長に表示したものをコンパクトにまとめるためか、スクロールバーが出てしまうのでなしにしました。

<iframe src="ページのURL" name="blogpettab_window" width="400" height="400" scrolling="no" frameborder="0" alt="BlogPetの広場"></iframe>

【2005.2.19　追記】
ランダム表示の改良版が登場し、留守番背景にも対応しました。
詳しくは「全てのBlogPetをサイドバーでランダム表示」をご覧ください。