[Blog 大補帖：佈景圖片] 拋開一成不變，佈景圖片隨機更新之語法

作者: Leonard 日期: 2008-07-15 13:45

字體大小: 小中大

本站網誌的佈景主題是採用 HKSS, UCLA Design by leison Skin，

layout.css 樣式表中的
#mainContent-topimg{
background-image: url(content_bg.jpg);

佈景主題圖片呈現是採嵌入固定，不會隨機更新的，在找尋 F2blog 相關資訊時，無意中瀏覽到網友 jerome 的 blog
(走過的、學過的、看過的 http://jerome.anyday.com.tw/)，網站的佈景主題效果隨機更新圖片，正是我想要加入到 "Leonard 幸福快遞" 的元素，在經過求教後 jerome 也不藏私的傾囊相授，在此由衷感謝!

同時參考 flower Design by leison Skin，修改過程還算順利，將修改的語法與大家分享!

最初對於本站佈景主題圖片輪播功能有 2 個想法:

1. 採固定連結對應：點選導行列的首頁‧歸檔‧留言板‧關於我‧連結，即可出現對應的 content backround 圖片。

2. 採隨機式呈現：無論點選導航列 or 文章，只要頁面更新，即可出現隨機的 content backround 圖片。(最後決定採第 2. 方案)

修改的語法如下:

1.random_bg.php 下載至 ./skin/HKSSUCLA/

下载: random_bg.php

<?php
$url='./bg';
$files=array();
if ($handle=opendir("$url")) {
while(false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
if(substr($file,-3)=='gif' || substr($file,-3)=='jpg') $files[count($files)] = $file;
}
}
}
closedir($handle);
$random=rand(0,count($files)-1);
if(substr($files[$random],-3)=='gif') header("Content-type: image/gif");
elseif(substr($files[$random],-3)=='jpg') header("Content-type: image/jpeg");
readfile("$url/$files[$random]");
?>