隨機變更 blog banner(圖片) November 5, 2007

許多部落格的首頁都會有一張 banner,通常是模版(template)預先設定好的。參考 KaieSandor 的文章後,在部落格模版中加入以下 script,就能讓 banner 隨機出現不同的圖片。原理是利用這個 javascript 改寫原來 CSS 裡對 banner 的設定。

請將下列 code 加在 <body> 後即可(原先 CSS 對 banner 的設定請保留)(註):
<script type='text/javascript'>
var banner= new Array()
banner[0]="圖片0.JPG"
banner[1]="圖片1.JPG"
banner[2]="圖片2.JPG"
var random=Math.floor(banner.length*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

請注意,務必先確認您 CSS 原本預設 banner(背景圖)是在哪個區段,通常是例子中的 #header-wrapper,但不一定如此,以免覆蓋了錯的 CSS 或是根本不存在的 CSS,導致無法達到目的。

日後新增更多圖片只要增加 banner[3] 、 banner[4] 等等,不需要更動這一段 script 的其他地方。

註:如果把 script 放在 <body> 後不能正常顯示(隨機出現 banner),請試著將整段 script 移至 </body> 之前。

3 comments:

EKSTATISCH said...

做成flash不就得了....:P

thinkerCKD said...

大師所言甚是,不過做成 flash 似乎是個門檻比較高的方法 XD

sandor said...

To EKSTATISCH:
作成flash的確是一個好方法,不過如果你要隨機選取的圖片有100個的時候,你可以想想你的swf檔案大小有多大了 :P 當然你也可以說用flash去抓取外部圖片,但是這樣跟這篇的精神是差不多的,而且你的blog還要允許你放置flash的banner (我沒試過,所以我不清楚 ^^a)

Post a Comment