[ blog ] 怎樣讓 banner 可以有換圖的效果
@ 2008.07.23 ( 780Views ) Blog
前一陣子 Leonard 在我那一個還沒有完成的 Work 分頁（謎之音：你哪一個分頁有完成過呀？），詢問怎樣讓 banner 的圖片可以隨著頁面的更新做變換；這個問題在很久以前在玩有獎徵答「到底我的 banner 有幾種？」時，好像也有朋友 MSN 問到過，不過我一直忘記回答。
其實這個換 banner 的圖片的動作，只是很簡單的透過一個程式，亂數讀取某個目錄底下的圖檔再把它顯示出來而已。而你所要做的事情是決定好你的 banner 的大小，然後更改 CSS 裡面關於 banner 的部分底圖的位置而已。
那詳細的作法是怎麼做呢？
首先您得先對 CSS 有一點概略的瞭解，可以找出控制您的佈景的 banner 的 CSS 元素是哪個？以 " Dream On " 這個主題來說，他控制的元素是底下這個
#banner{
clear: both;
margin: 20px 0 0;
width: 729px;
height: 191px;
background: #2e2e2e url(images/banner.jpg) no-repeat;
}
url(images/banner.jpg) 的意思就是使用的圖是放在 images 這個目錄底下的 banner.jpg，如果你喜歡的 banner 大小跟 banner.jpg ( 729px * 191px 是一樣大的，那你只要去把 url 那一個刮號裡面改成你控制程式所在的位置就可以了。改完應該是類似這個樣子。
#banner{
clear: both;
margin: 20px 0 0;
width: 729px;
height: 191px;
background: #2e2e2e url(http://domain.name/mybanner.php) no-repeat;
}
那如果 banner 大小不符合你的需求，那要動的部分可能就更多了，您得去研究一下 banner 之間的相關性，一一做修正，但這些不在本篇的討論內。
那這個程式要到哪裡找？
我用的版本是綠界 董事長 Jmwang 幫我寫的程式，但是因為版權屬於 Jmwang 老人家，所以我也不方便公開；但是網路上應該有很多類似的程式可以找到。
如果您真的找不到，F2blog 有一個模版叫做「簡單生活 」，作者就是採用可換圖的 banner 的方式處理，您可以下載那個模版，然後把換圖的程式拿來使用。
不過這個模版我剛剛嘗試一下已經無法下載，作者的網站也連不上去了。
我朋友有使用這個 skin ，所以我把他的換圖程式 擷取出來了，如果您有使用，別忘了寫一封信給作者 leison 表達您的謝意。
這個程式的使用方式很簡單，先把 headerimages.php 放在某一個目錄內，比如說放在您網站根目錄下面，那就是
http://your.domain.name/headerimages.php
因為這個程式是設定讀取 "headerimages" 子目錄內的圖檔，所以請在程式所在目錄建立一個子目錄叫做 "headerimages"，把圖都丟到 "headerimages" 這個目錄內。
接著您可以先直接在瀏覽器的網址列打上 http://your.domain.name/headerimages.php 看看圖有沒有出現？ reload 以後會不會換圖？
如果都沒有問題了以後，按照一開始改 CSS 的部分改好，就可以擁有一個可以換 banner 的佈景囉！
.
感謝分享啊...我的部落格已經改好了，也已寫信給 leison 表達謝意了。
其實這個滿簡單的
我家的佈景也有一部分有應用到換圖的效果
[站務] Blog banner 隨機更新功能!!...
今天早上花了20分鐘研究了一下如何使用javascript code來自動改寫CSS的內容，如此一來就可以隨機更新我的blog banner了 ^^ 大家可以多試幾次「重新整理 F5」，就清楚了! 以後會慢慢新增一些blog ban...
網站版面大翻修及實現Banner隨機換圖的效果...
一個學期又即將結束，今天終於塵埃落定把學校網站改頭換面，修正到稍微滿意的樣子，順便做個簡單的紀錄。 Banner 改成令人神輕氣爽的藍天白雲，並且搭配Fun(放)暑假的概念。 Flickr Badge 搜...
我之前也有看過有一樣的作法
就是把一段php放在header去跑的
就是隨機顯示首頁圖片，好像我也有分享過教學啊:P
@佑, Robbin:
是真的很簡單呀，只是一個概念的運用！
真正的原因是：本格缺水，可是又無法像是成功商務人士 Robbin 一樣可以儲水很久，所以只好灌灌水囉！
好像還有一種,即使不reload,照片也會每隔幾秒自動更換,這個需要改的地方是不是更多啊?
我現在想先把一些細節修改好,部落格還有一些功能非常殘破,字體也不太對..哈哈
超感謝你的教學的！根據你的教學，我另外寫了一篇適用於blogger的方法，然後把此篇非常棒的教學文章的網址，附在文章最後，希望沒有侵犯到您，如果不允許連結的話有，請告知我，立即修正，謝謝:)
@sunplant:
您要的效果，我不會耶！
不好意思喔！
@Mango:
您寫得很好耶！
請多多發揚！