2005年 2月 18日（金）
仏滅 雨水
今日は何の日？
BlogPetたちをタブインデックスで表示させてみる 
JavaScript を使って 5種類の BlogPet を ランダムに表示させる ようにしてたんだけど、
KOROPPYの本棚 さまの 「タブ切り替えで全てのBlogPetをサイドバーに表示」 という記事を拝見して
タブで切り替えも いいかも・・・とか思ったので、やってみました。
JavaScript Market さま作の Script 「レイアを使ったタブインデックス」 を 使ってます。
KOROPPYさんの記事 から ヒントを得て お留守番背景 も 入れてみました。
なんとか できたんだけど・・・・ランダム表示 と ホント 一長一短なんですよねぇ。
ランダム表示 は 軽くて すぐに表示されるんだけど、
次に表示されるPetを 自由に選ぶことはできません。
これに対し、タブ切り替えだと 好きなPetを選んで表示ができるし、
お留守番背景も 入れることができるけど
とにかく、ページが全て表示されるまで BlogPet は 表示されないので
最初に表示されるまでに かなり時間がかかります。
（そこで、BlogPet が表示されるまで 本来はBlogPetサーバダウン時の為の
お留守番背景が 見えるようにしてます。）
また、タブと BlogPet のフレームの背景に うっすらと 色を付けているのですが、
これが見えるのは IEのみで、NetScape や Firefox で見た場合は 真っ白。
その代わりと言ってはなんだけど、これらのブラウザで見た場合、BlogPetのフレームの下に
セットしたお留守番背景の上部が 少し覗いてしまってます。ダメじゃん。。。
これは・・・ランダム表示に 戻しちゃうかもしれないなー。
タブも 画像入れたりしてかわいくできたんだけどなー。
タブに並んでる動物の画像は ★☆ばにらん☆★ さまで いただいてきました。キュートな動物達が お気にです。
* こちら の方法に 切り替えました。（2005.02.19）
JavaScript は、上記サイトさまでいただいてきたものを 丸々コピーで使用してますが、
タブインデックスの テーブルのソースを 書いておきます。
<table border=0 cellspacing=0 cellpadding=0 width=150>
<tr>
<th width=30 bgcolor=ffefef><a href="" onClick="active(1); return false"><img src="（うさぎの顔画像パス）" border="0" title="こうさぎ" /></a></th>
<th width=30 bgcolor=ffffef><a href="" onClick="active(2); return false"><img src="（猫の顔画像パス）" border="0" title="こねこ" /></a></th>
<th width=30 bgcolor=efffff><a href="" onClick="active(3); return false"><img src="（犬の顔画像パス）" border="0" title="こいぬ" /></a></th>
<th width=30 bgcolor=efffef><a href="" onClick="active(4); return false"><img src="（パンダの顔画像パス）" border="0" title="こぱんだ" /></a></th>
<th width=30 bgcolor=efefff><a href="" onClick="active(5); return false"><img src="（ねずみの顔画像パス）" border="0" title="こねずみ" /></a></th>
</tr>
</table>
<div id=lay1 class=tab>
<table border=0 cellspacing=0 cellpadding=10 width=150 bgcolor=ffefef><td>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="（お留守番背景画像のURL）"><tr><td>（こうさぎのスクリプト）</td></tr></table>
</td></table></div>
<div id=lay2 class=tab>
<table border=0 cellspacing=0 cellpadding=10 width=150 bgcolor=ffffef><td>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="（お留守番背景画像のURL）"><tr><td>（こねこのスクリプト）</td></tr></table>
</td></table></div>
<div id=lay3 class=tab>
<table border=0 cellspacing=0 cellpadding=10 width=150 bgcolor=efffff><td>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="（お留守番背景画像のURL）"><tr><td>（こいぬのスクリプト）</td></tr></table>
</td></table></div>
<div id=lay4 class=tab>
<table border=0 cellspacing=0 cellpadding=10 width=150 bgcolor=efffef><td>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="（お留守番背景画像のURL）"><tr><td>（こぱんだのスクリプト）</td></tr></table>
</td></table></div>
<div id=lay5 class=tab>
<table border=0 cellspacing=0 cellpadding=10 width=150 bgcolor=efefff><td>
<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="（お留守番背景画像のURL）"><tr><td>（こねずみのスクリプト）</td></tr></table>
</td></table></div>
また、スタイルシートに 以下を 追加します。
.tab { position:absolute; visibility:hidden; }
≪ 続きを隠す
Posted by Caetla at
05:09
| Category :
BlogPet
|
Comments [6]
|
Trackbacks [2]
|
Clip!!
|
Ranking
Tag :
BlogPet
この記事はどうでしたか？（お気軽に 記事に点数を付けてみてくださいね♪）
Bad ← 1 2 3 4 5 → Good
評定平均:(2.9) 総合点:(1074) 投票人数:(373) |
 |
1
動物のアイコン、キュートですねっ 
でも確かに、ページの表示が終わるまでは留守番背景になってしまいますね。
難しいところです。
サイドバーでは重そうなので、私は広場でタブ表示に戻すかもしれません。
2
>>1 KOROPPYさん
そうなのよねー。せっかくかわいくできたから、捨てちゃうのもったいないしぃ。なんて・・・ 
3
こんばんは。いつも参考にさせていただいてます 
このタブでアイコンで表示版を使わせていただこうと思ったら
アイコンは表示されるのですがそこから下が表示されなくなってしまいました・・・
原因はわかるでしょうか？
javascriptは＜head＞＜/head＞内に記述し、
こちらのテーブルソースをいただきスクリプト等を直し入れたのですが
アイコンだけ表示され、アイコンからそれぞれのペットへは飛ばず
そこから下が何も表示されなくて・・ 
このテーブルスクリプトの下に記述する事はありますか？
申し訳ありませんが原因がわかるようでしたらよろしくお願いします。
4
>>3 ちひろさん
こんばんはー。JavaScriptですが、あたしは ＜head＞ ～ ＜/head＞ 内に記入せず
テーブルタグの直前に入れてます。あと、テーブルタグの下には サイドメニューを
折りたたむスクリプトを 入れてるだけです。参考になるといいですけど・・・
5
こんにちは。
BlogPetランダム表示JavaScriptを改良しました。
ページ表示後も一定時間ごとにランダム表示したり、見たいペットへのリンクをつけたりすることができるようにしました。
こちらにありますので、良かったらご覧ください。
6
>>5 壱さん
w(゜o゜）w オーッ 素敵ですぅ。早速 使わせていただきました。
好きなペットへのリンクは 画像にしてみました。ヽ(￣▽￣)ノ
