今天早上花了20分鐘研究了一下如何使用javascript code來自動改寫CSS的內容，如此一來就可以隨機更新我的blog banner了 ^^ 大家可以多試幾次「重新整理 F5」，就清楚了! 以後會慢慢新增一些blog banner在這，不然一直使用別人(樣本)的blog banner也不好，怎麼說自己也是有不少還可以的照片，不用好像太對不起自己了 :P 對這個功能也有興趣的朋友，可以連結到延伸閱讀的那幾篇文章看看就明白了 :)
後記:
我也把程式碼作了一點小更動，原因是要維持每張照片出現的機率均等。例如我現在想製造一個0-3之間的隨機整數，依照Kaie的寫法，出現0的可能是當3*Math.random()計算結果為0-0.4999，而出現1的可能是當3*Math.random()計算結果為0.5-1.499之間，明顯的看來第一張照片(banner[0])的出現機率硬是比第二張(banner[1])的機率小了約一半，同裡最後一張照片的出現機率也會較低一點。所以我把我的計算方式從四捨五入(round)的語法改成無條件捨去(floor)，這樣一來各張出現的機率將更為均等。 :) 。所以其中那句程式碼將改程如下所示，其中4就是表示總共有4張圖片(也就是產生0-3之間的隨機整數)囉!! ^^
var random=Math.floor(4*Math.random());
2007.09.20後記:
另外，也可以把4改成banner.length這個變數(就是變成下面的程式)，這樣一來它就會自動依照banner這個array的長度(個數)作調整，所以以後新增圖片的話，就不用去更動那個數字囉 ^^
var random=Math.floor(banner.length*Math.random());
延伸閱讀:
站內:
* [站務] Blog banners 整理!!!
站外:
* [ blog ] 怎樣讓 banner 可以有換圖的效果 走過的、學過的、看過的
* Kaie's Blog: [Blog] Random Rotating Banner Hack
* Freeyasoul Adventure: Random Rotating Banner Hack
* JavaScript - Wikipedia
* CSS - Wikipedia
電腦 | 軟體/桌布 (2)
謝謝你對購買dSLRㄉ建議~sandor~ 對ㄌ~請問你這javascript是放在那兒?~一般是放在HTML page~我們好像只能修改CSS?~
不會!!我自己是用canon的，所以我也是把我知道關於nikon的跟你說而已，如果有記錯還請見諒 :P 我的javascript一律放在PIXNET後台的"網誌描述"那一欄裡面 :)
嗯，您說的有理...Good job...當初我也沒仔細研究，直接轉載過來，翻譯一下..XD
呵呵~大家討論討論囉 :)
多謝啦~sandor~真是好用~太利害ㄌ~怎麼知道(figured out)放在"網誌描述"理會寫進
tag?我放在在CSS試ㄌ幾次都沒用~所以用ㄌ你ㄉ方法~也改成math.floor~works pretty well~thanks a lot!~呵呵!!因為我之前掛Google Analytics就是把程式碼放在網誌描述裡，所以這次我就直覺把程式碼放在那囉 :)
真是聰明的設計,難怪我早上看和下午看到的banner圖片不一樣.^^
呵呵~謝謝你的誇獎!我也是從別人那裏學到了一些東西呢 :) 我想每次來都有一些不一樣，這樣一來也比較有新鮮感 :P
每一張都好棒唷~忍不住會一直按F5耶XD... 這個設計很棒呢QQ"
謝謝 :) 這些照片都是精挑細選的呢 :P
想請教一下，banner圖片寬度要怎樣調整才能將整個畫面都填滿呢？就像您的一樣？如果沒辦法填滿，那更換的時候空白處會滿難看的說......
恩..我是一開始上傳照片前，就先設定好照片的尺寸都是1155x685了~這樣一來應該就不會有你說的那個問題了~你可以試試看囉!! :)
您指的尺寸，是指照片本身的pix嗎？我先試看看，希望可以成功，謝謝你！
是阿!!我說的就是照片本身的畫素 :) 有問題再來討論討論唄 ^^
謝謝你啦，已經成功囉！感恩！如果有攝影方面的問題還得向您多請教 :)
我也還在學習中~大家一起討論吧 :)
我又來了 這次是有人反應說，他們開我的部落格會因為這個js導致瀏覽器當掉，你這邊也會有這種狀況嗎？ 我自己用火狐或IE開都不會這樣 不曉得是怎麼回事？
這樣阿~~我自己是沒有遇過這樣的情況耶!! 不過我有幾個想法: 1. 你確定他的ie是因為這個js當掉的嗎? 2. 我看你的banner Array有31個element在裡面了，有沒有可能是因為數目太多而當掉? (只是猜測，因為我也不是寫程式也不是我的本科系 XD)
我近期增加的js只有這項,所以合理懷疑是這個js,但我也有要他們注意當在哪邊了 數目太多應該不是問題，因為一來我用火狐或IE開都沒事，二來這個js也不是一次讀31張照片，而是亂數找一張來讀取，應該不會造成問題才對 我是懷疑應該是別的js的問題啦,但這個還得多收集案例才找得出來,真是麻煩 ,唉 謝謝你啦 :D
您的懷疑當然是有道理的，不過這個還是得再確認，畢竟通常只有含有無限迴圈的js容易讓瀏覽器當掉才對，所以我才會覺得這個js程式應該不會有問題，沒辦法幫上忙，真是不好意思 ^^a
唉呀，這樣就太客氣了 問題大概找到了，不關banner的事 很有可能是他們的瀏覽器不支援或對某些flash讀取有問題所致 還是謝謝你囉 感謝！
了解~問題解決了就好 ^^
謝謝你的分享，我也掛上隨機banner了。
不會~~ :)
sandor大，我研究了兩個晚上終於把自己的blog也掛上隨機banner了 感謝您寫的這篇教學，向您致上無比的敬意。 每次上自己的網誌都有新意的感覺真好：）
我有去看過你的blog了 有幾張照片真的拍的還不錯說 :) 另外，如果可以直接把那些banner整理到某個set去的話 我想大家想直接看看你選了那60張照片 會方便的多 ^^a ps. 如果想在blog裡面插入Flickr slider show 可以參考下面幾個網址提供的code喔 :) http://www.slideoo.com/ http://www.slideflickr.com/
大大整理到一個set的主意真不錯....有空來試試.... 我沒事幹嘛弄那麼多張阿>___< 搞死自己....
呵呵!!不會拉!!自己開心就好啦!! ^^
沒想到這麼短的語法就有這樣大功效!!
是阿!! 正所謂小兵立大功呢 :P
我也用好囉 好棒的功能 引用一下您的教學 感謝大大唷^^
okok~引用請自便 :)
你好~謝謝你分享這麼棒的語法~ 不過，我有問題想請教一下!! 請問:如何讓網誌名稱可以跟著圖片一起出現呢? 因為，我的隨機圖片把名稱給擋住了~ 不好意思~第一次留言就麻煩你~ 但還煩請給我回覆~謝謝~
ㄟ...我沒有遇過這樣的狀況耶 ^^a 而且我看不到你的blog 所以也不知道問題可能出在哪裡 不好意思 沒有幫你解決問題 ^^a
你好~謝謝你的回覆~ 沒關係~因該是我的語法沒弄好!! 因為我現在還在試，所以BLOG才沒有打開!! 我再用用看好了~ 不好意思~麻煩你了~謝謝~
不會拉 ^^a 有什麼問題大家可以再提出來討論討論囉 :)
您好！ 看到您的這篇文章，很有興趣， 但我想請問一下，banner和header這兩個位置有什麼不同嗎？ 因為我希望header位置的圖片也能有同樣的效果。 不知您知不知道有什麼方法嗎？ 謝謝！
我不太清楚你指的header是什麼 ^^a 但我猜我們應該是指同樣的東西吧
我是廣告創意人 但是網路程式語言真的不懂 想放屬於自己的設計的版面又不知如何編寫程式 看了你的文章還是覺得好難ㄎㄎㄎ 不過 認識一個新的板板 板主有雙細心觀察的眼睛跟獨特的美感造詣 給你拍拍手^^
程式我也不是很厲害 也是網路上多看看 就多學學囉!! 我只是用我的方法紀錄看到的東西囉 謝謝你的誇獎拉 :)
請問如果我要更改版面上方的banner 我的照片大小尺寸要設定多少呢??^^
下面這個語法就有答案囉!! 只要你照片的高度大於650px,理論上來說瀏覽器會自動幫你等比例縮到高度是650px,但是如果照片的高度小於650px的話,它也會幫你放大到650px,不過這時候可能就會有馬賽克(因為格放的關係)出現囉 !! :) 當然這個數字是可以隨你設定的,如果你不想要像我一樣放這麼大的banner,你就把它縮小一點囉 ~~ :) document.write(' #Top{height:650px;background:url("' + banner[random] + '") left top no-repeat;}');
謝謝你詳細解說 另外想在請教那banner的寬度呢?? 多少比較適合?
我覺得都ok耶!!看你整個版面的設計阿~~ ^^ (這樣好像沒有回答到你的問題 :P )
如果想要滿版呢?? 這樣寬度是多少＠＠？
恩..應該這樣說好了..多少的寬度叫做滿版,應該用螢幕的解析度來看,如果你的螢幕是800x600,那你看到一個寬度是800的就叫做滿版囉 :) 有機會的話,使用不同解析度的螢幕看看自己的blog,會是不同的感受的 :P 不知道這樣有沒有回答到你的問題? ^^a
有~~ 謝謝你的回覆 我瞭解囉^^
:)
請問我已經把語法放在後台的"網誌描述"欄位了， 不過banner依然跑不出來... 不曉得是什麼問題呢？
ㄟ..我看了一下..你在"網誌描述"欄位的語法應該是都沒有錯誤..所以我想你可能沒有把CSS裡面banner的那一行刪除.. ^^a 你可以試著刪除CSS裡"background:url"的設定.. :)
我把url那一段刪除了還是不行...＝ ＝ 如果把整段刪除，連照片的尺寸大小都會跑掉了... 請問是不是我有漏了什麼地方呢？
ㄟ 不用把整段刪除喔~~ 只要把"background:url"那行刪除即可~~ 你再試試看囉!! 如果再不行的話 我在猜可能是模板的關係~~ @@
您好, 想請問若是使用樂多 blog, 隨機 banner 語法應該是要放在那裡呢 ? 是放在 CSS 語法裡嗎 ?
哈囉~~我沒有用過樂多,不過我是把我的語法放在blog的描述裡面,給你參考一下囉 :)