FCafe  背景ランダム化汎用関数

Jerry Wallace の唱が聴こえて来てる方は幻聴じゃありませんよ BGMで流してますから。
貴方はセンス・経験の両面で FCafeテイストを真に御理解下さってるアミーゴです  握手を。
( Stylistics 、て方もいるかも・・? )

 前記事で特定のID部の背景画像を(ロード時に)ランダム表示するスクリプト(関数)を御紹介しました。 引数部分を変更すればどのようなIDを持つタイトル部にも背景画像を切り替え表示できる(適切なファイル名を持つ画像が指定枚数分UPされていれば)訳です。

 お気付きの方もいらっしゃるかと思いますが、上記関数は同一ページ中に複数回使用する事も可能です。 タイトル部と異なるIDを持つ領域に異なる画像を異なる枚数からランダムに表示できるのです。  勿論[ID名+数字] というファイル名を用いる方式でありますから記事(コメント)毎に変化する独自変数をIDに含むような領域には適用できませんが、『定常的』なIDを持つ領域であれば何箇所でもOK。
例えばヘッダとフッタで5枚ずつの画像をランダム表示させれば組合せは 5×5 で25通り!   頁総体としてのバリエーションは飛躍的に増加します。

「あなたも如何ですか?」 とお勧めしたいところですが、気になる点もあります。
前記事のスクリプト中の center no-repeat  の箇所のことです。
この文字列は「領域中央に画像を"一枚"だけ」 置くという意味(背景画像が領域サイズと等しいかそれより大きい場合は無くても可)ですが、 背景画像の表示されるパターンはこればかりであると云えるでしょうか。
否。  左上に桜の写真を置きたい人もいれば、右下に向日葵のイラストを貼りたい人もいるでしょうし、テクスチャをランダムに変更したい方だっているかもしれません(素材屋さんとか)。
いや、「イラストやテクスチャは gif 画像を使いたい」 て方だっていらっしゃるかも。
オーケー、 オーケー。  全て適えてさしあげようじゃありませんか。


SAMPLE


【 設定法 】  HTMLのhead領域に以下のスクリプトを書きます。

<script type="text/javascript"><!--
function RndPic(X,N,G,S){ if (document.getElementById){
var F="url(<%url>file/"+X+(Math.floor(Math.random()*N)+1)+"."+G+") "+S;
document.getElementById(X).style.background=F;
} }
// --></script>

背景画像をランダム表示させる領域にIDを振りデフォルトのCSSを指定する事、
背景画像のネーミング・アップロード等の準備方法は前記事と同じです。
ランダム表示領域の後に以下のスクリプトを書きます。

<script type="text/javascript">RndPic("ID名",枚数,"type","style")</script>
( ▽ 前記事と同様の場合の例 )
<script type="text/javascript">RndPic("TOP",6,"jpg","center no-repeat")</script>

【 解 説 】  今回の関数 RndPic は4つの引数を持ちます

  1. 背景をランダム表示する領域のID名
  2. 切り替えて表示する画像の枚数
  3. 選択・表示される画像の種類 ( "jpg" / "gif" / "png" )
  4. 壁紙の表示スタイル ( 例: "top left repeat-x" )
( 「枚数」を指定する第2引数以外は「文字列」なので "xxxx" のように書かねばなりません
  スタイルを指定する第四引数は 省略すると "left top repeat" と同じになります )

つまり、「任意のID領域」 に 「任意の種類の画像」を「任意の枚数」から「任意のCSS形式」  でランダムに背景(壁紙)表示させる事が可能な訳です。
ここも、あそこも エヴィ〜 ラァァンダム ♪

Comment


 
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/463-78bc0307

Shown after Admisson
.

≫ よりランダムに 背景画像ランダム表示 ≪

2007 / 05 / 08  Tue
Operation   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced