養魚手札

關於部落格


var banner= new Array()
banner[0]=" http://farm3.static.flickr.com/2606/4105087991_82545aa5cd_o.jpg"
banner[1]=" http://farm3.static.flickr.com/2587/4105856210_22c6f97e8a_o.jpg"
banner[2]=" http://farm3.static.flickr.com/2630/4105088775_b64e5da559_o.jpg"
banner[3]=" http://farm3.static.flickr.com/2785/4105856964_2ccc1c8f19_o.jpg"
banner[4]=" http://farm3.static.flickr.com/2711/4105089487_18c2d2ea62_o.jpg"
banner[5]=" http://farm3.static.flickr.com/2724/4105857870_e67852af97_o.jpg"
banner[6]=" http://farm3.static.flickr.com/2604/4105858324_8c33d63f64_o.jpg"
var random=Math.floor(6*Math.random());
document.write("");
document.write("#banner {");
document.write(' background-image:url("' + banner[random] + '") ;');
document.write(" }");
document.write("");




function toggle() {
var ele = document.getElementById("navbarb");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}






  • 197922

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

天空部落格-Banner圖片隨機更換

隨機換圖-1

#banner {

        BORDER-LEFT: medium none;
        WIDTH: 960px;
        BORDER-BOTTOM: medium none;
        HEIGHT: 311px;
        background-color: #ffffff;
        background-image: url(banner圖片網址);
        background-repeat: no-repeat;
        background-position: right top;
}

上面這段是我的blog內banner的CSS語法。

<script type="text/javascript">
var banner= new Array()
banner[0]="
banner圖片網址"
banner[1]="
banner圖片網址"
banner[2]="
banner圖片網址"
banner[3]=" banner圖片網址"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("#banner {");
document.write(' background-image:url("' + banner[random] + '") ;');

document.write(" }");
document.write("</style>");
</script>
上面這段則是變換banner圖片的語法,要放進自訂欄位或天空的
部落格描述

⒈紅色字體的部分為需要更改的地方:
        ①banner圖片網址為banner圖片的連結位址,要注意圖片放置的空間要有外連功能。
        ②3則依照放置圖片的多寡而更動,
            如果如上所示,放置4張圖,則此處填3。如果放6張圖,則填5。依此類推。
⒉紅色字體部份更改完畢後,將此script 放置於自訂欄位中,
   並將CSS裡面的
background-image: url(圖片網址);  語法刪除。
⒊另外要注意
script 與css表中綠色圈選部份需要相對應。
   在天空部落格內應該是跟上面寫得一樣,但是其他部落格服務空間可能就會不同了。

ps.用此方法後,天空blog影音部份的banner圖片會消失,因為那一頁無法自訂欄位。
  而天空部落的個人資料 > 部落格描述 可以支援此網頁語言
  所以可以把該放進自訂欄位部份的語法放進部落格描述,如此每個地方都可以自動換圖了。


參考資料:http://freeyasoul.blogspot.com/2006/10/random-rotating-banner-hack.html

相簿設定
標籤設定
相簿狀態