[ blog ] 怎樣讓 banner 可以有換圖的效果

前一陣子 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 的佈景囉!

.

相關文章:

17 thoughts on “[ blog ] 怎樣讓 banner 可以有換圖的效果

  1. 自動引用通知: 新竹市北區南寮國民小學
  2. 我之前也有看過有一樣的作法
    就是把一段php放在header去跑的
    就是隨機顯示首頁圖片,好像我也有分享過教學啊:P

  3. @, Robbin:
    是真的很簡單呀,只是一個概念的運用!
    真正的原因是:本格缺水,可是又無法像是成功商務人士 Robbin 一樣可以儲水很久,所以只好灌灌水囉!

  4. 好像還有一種,即使不reload,照片也會每隔幾秒自動更換,這個需要改的地方是不是更多啊?
    我現在想先把一些細節修改好,部落格還有一些功能非常殘破,字體也不太對..哈哈 😳

  5. 超感謝你的教學的!根據你的教學,我另外寫了一篇適用於blogger的方法,然後把此篇非常棒的教學文章的網址,附在文章最後,希望沒有侵犯到您,如果不允許連結的話有,請告知我,立即修正,謝謝:)

      1. 终于找到毛病了,没想到CSS设定这么BT,连定义字段的先后放置都很重要。看来是我太不懂程序了。

  6. 按照您的方法终于在Desire主题上安装成功了。这个主题也是Sadish Bala制作的 😀 可是问题来了,因为我的Firefox有安装silverlight plug-in,结果每次刷新页面以后,新图片不会马上出现,而是要拉动滚动条以后才起作用。如果拉到一半的话,还会出现上面是新图片,下面为旧图片的奇怪效果。禁用silverlight plug-in以后正常看到。但问题是,即使我有安装silverlight plug-in,在浏览您这个博客时却是正常的,为什么我自己的博客却出现那种效果呢??

      1. silverlight plug-in 应该是与 flash player类似的一款插件。晚上我重新安装firefox 3.6.3 以后(没有silverlight),问题仍然没有解决。今晚上您的博客的时候,您的也会出现这个问题(截图)而我的就一直存在 😥 。不过如果用IE或是CHROME,都不会出现这个问题。(FIREFOX做出这种特效 😳 ,只需要点击HOME或者刷新页面,然后用鼠标拉动滚动条到图片的一半。我试过很多次,只是有一两次正常显示)。浏览器的bug?代码?空间?网络?因为现在是用免费空间,昨天因为测试比较多,现在已经不能访问了 😡

發佈回覆給「para」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。