20090410 隨機部落格橫幅(banner)

自從跟pipi說了更換部落格上方橫幅的方法之後
pip現在是有活動、有新照片就試著修幾張圖來玩玩
結果今兒個，大概是覺得自己太有美感了吧？
( 不要懷疑，這人有9成9的自戀傾向...很會自我滿足 ) 
說想要讓部落格可以輪流播放不同的橫幅哩...



雖然網路上到處都有資料，但還是來做個小筆記
省得哪天又忘的一乾二淨  XD
在 CSS 當中應該會有一個段落是指定頁面標題的背景圖案
其實改不改掉倒是無妨，因為新放上去的橫幅圖片會在這個背景圖的上層
並不會有什麼影響的。
將以下的語法加在頁首樣板檔的適當位置，通常是 header.template

---

＜script type="text/javascript"＞
var imgArray = new Array("A.jpg", "B.jpg", "C.jpg");  ← 將這些圖片上傳到樣板目錄中
var imageFile = imgArray[Math.floor(Math.random()*3)];   ← 要隨機播放的圖片數量
document.write('<img src = "{$url-＜getUrl("/$blogtemplate/images/")}' , imageFile , ' " border="0" /＞');   ← 所上傳的圖片目錄
document.write('＜br /＞');
＜/script＞

---

這樣一來，就可以讓頁首的橫幅檔案隨機播放囉 
此外，如果想要讓使用者只要透過滑鼠點擊頁首的圖檔就可以回到部落格首頁的話
那麼就將 

document.write('img src = "{$url-＜getUrl("/$blogtemplate/images/")}' , imageFile , ' " border="0" /＞');

置換成

document.write('＜A href="{$url->blogLink()}"＞＜img src = "{$url-＜getUrl("/$blogtemplate/images/")}' , imageFile , ' " border="0" /＞＜/A＞'); 

這樣就可以囉  :)
效果就如：葫蘆墩國小訓導處