I'm Thinking.
feed hare
野兔搬新家囉！
改名為「野兔村」，歡迎來參觀唷！
野兔部落的上頭版面小更新囉！
主要變更#header的banner圖，利JS跟CSS我改成隨機顯示圖片背景，所以每一次進來FUN攝影 Kerwin的野兔部落，都會看到不同的Banner圖我放六個照片上去



其它的照片，就讓你自己來發現吧！

現在來教一下怎麼實現這隨機變換圖片的方法 (此 方法為PIXNET限 定，其它的BSP要試一下！)
首先下面的code裡面的
banner[]=""   <=放圖片的網址
例：banner[0]="http: //p4.p.pixnet.net/albums/userpics/4/4/550444/496ecc0a29538.jpg"

加上去後，接著要找到
var random=Math.round(3*Math.random()); 這一行
注意那個3，banner[?]裡的數字多少就要改成其數字
這樣大致就完成了！
接著將下面的JS code碼複製起來，貼在公告區內(建 議)，可以貼在其它的區塊內，不過貼在其它區塊內的話圖片會慢半拍才會出來，所以建議貼在公告區，然後將公告區的狀態改成開啟
<script type="text/javascript">
var banner= new Array()
banner[0]=""
banner[1]=""
banner[2]=""
banner[3]=""
var random=Math.round(3*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background: url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
然後到CSS裡，要記得把
#header{
background: ;
            }
裡頭的background: ;刪掉或是用註解，這樣才能正常運作！

當然這裡頭還可能需要注意圖片的大小，跟版面的配置，每個CSS配置都不同，我提供的是一個方法，希望這篇文章對有需要的朋友有用處！

Posted by hare48 at 痞客邦 PIXNET Comments(30) Trackback(1) Hits(745)

Recommend to Front page Forward by E-mail Forward to Guestbook

Posts on this date
▲top

open trackbacks list Trackbacks (1)

Comments (30)

Post Comment
  • #1 cctsai on 2009/01/15 17:51

  • 等待您~
    來教教天空使用者嘛
  • 天空的，可能要摸一下，基本上只要改一下內容而已！有空再來試試(沒在用天空，不是很瞭天空的運作)

    hare48replied on 2009/01/15 17:58

  • #2 就是愛趴趴照 pixnet user on 2009/01/15 18:26

  • 哇...我找這這個找久了
    真的太感謝你了..回家趕快來玩玩!!
  • 這個很有趣呢！使用後有問題可以來問我！

    hare48replied on 2009/01/15 19:02

  • #3 mafia999 pixnet user on 2009/01/15 19:20

  • 不錯喔~~~這個我也有弄捏~~~我還想有空的時候, 來再加上一些FLASH效果~~^^
  • 我就是看到有人用覺得不用，所以也來弄一個玩玩
    flash我也有想過，但不太會作FLASH，所以先做罷囉

    hare48replied on 2009/01/15 20:08

  • #4 Amigo pixnet user on 2009/01/15 20:37

  • ㄟ...好難懂哦...
  • 咦...哪裡不懂？

    hare48replied on 2009/01/15 21:04

  • #5 sadnesswei pixnet user on 2009/01/15 20:38

  • 不錯的教學呢:D
    很適用!!!
  • 在PIXNET想換首頁圖的，這招很快呢！這樣每次來就不會一直看到同樣的照片

    hare48replied on 2009/01/15 21:05

  • #6 jonba5 pixnet user on 2009/01/15 21:20

  • 啊~不會
  • 妳來搞笑的嗎？

    hare48replied on 2009/01/15 21:24

  • #7 Amigo pixnet user on 2009/01/15 21:36

  • 我再來研究一下好了,若還是看不懂,再來請教你...
    先前我是想把我自己照的樣片放在最上面,但好像是大小的問題,所以照片看起來很怪~
    像你教的這個和更改最上面照片是不是都要進去CSS原始碼編輯那裡做更改呢?
  • 我這個方法是用Javs Script
    所以圖片要先做好(尺吋要對)
    然後把圖片的網址加到banner[0]="" 的雙引號中

    修改CSS的地方只有
    #header{
    background: ;
    }
    這部份，其中background:這一行要刪掉或是用/* background: ; */ 註解

    hare48replied on 2009/01/15 21:44

  • #8 Amigo pixnet user on 2009/01/15 21:55

  • 了解...我有空再來把圖片做好.
    謝謝解說^^
  • ^^ 加油囉~不會再過來問我！

    hare48replied on 2009/01/15 22:39

  • #9 littlesky116 pixnet user on 2009/01/15 23:14

  • 痾... 我是真的不會...

    你是怎照相的阿? 超級有
    成次
  • 一開始可能需要拍些簡單的東西，不要拍場景太複雜的，找一些主題明顯，背景單純的來拍，會比較好上手！
    拍照可能需要多看別人的照片，然後自己想一下別人怎麼拍的
    最後就是不要讓拍照成為壓力囉~
    要快樂地拍照，重點是不在拍的多美多好，而是拍到的東西有沒有意義！

    hare48replied on 2009/01/16 09:06

  • #10 celestechien pixnet user on 2009/01/16 05:15

  • =.=|| 害我一直按重整...
  • 哈！
    那都有看到了嗎？
    好久不見了，歡迎回來囉~

    hare48replied on 2009/01/16 09:08

  • #11 oliviadream pixnet user on 2009/01/16 11:12

  • 哇..好棒喔！我也要來試試...
  • ^^，剛看了妳的BLOG版型是屬於一整套的，用這一招的話怕會破壞美感(除非圖片也是同一系列的)

    hare48replied on 2009/01/16 13:04

  • #12 versace514 pixnet user on 2009/01/16 14:27

  • 很實用！
    下次改版時也來試試。
    ^^..
  • 這方法簡單又方便，很容易上手呢！

    hare48replied on 2009/01/16 14:39

  • #13 oliviadream pixnet user on 2009/01/16 16:56

  • 喔，謝謝大大....

    那我先記起來..下次換版在用囉！
  • #14 hir818 pixnet user on 2009/01/16 16:56

  • 正在找這個, 您就PO上教學了.. 謝謝!!
    對了,您知道有什麼是可以所見即所得的CSS編輯器嗎? tks.
  • 呵，這也是我最近想改一下版面才找來的功能
    你的所見即所得指的是什麼呢？
    一般所見即所得工具都是指像word編輯器的功能嵌在網頁裡來做編輯，像是pixnet裡的發表新文章裡的編輯列
    如果你說的是CSS專用的所見即所得，這我倒是沒聽過了！
    一般CSS一寫好版面的型也會跟著改變，pixnet裡有提供預覽的功能，還不錯用！

    hare48replied on 2009/01/16 17:11

  • #15 jjhsu pixnet user on 2009/01/16 20:08

  • 真是有趣的功能，小小改變就有無窮樂趣，等下來來找我家狗狗的照片試試！謝謝！
  • 很不錯的小功能，且很容易上手，如果有問題可以再回來問問野兔^^

    hare48replied on 2009/01/16 20:28

  • #16 紐西蘭美女 pixnet user on 2009/01/17 13:07

  • 好棒喔^^
    可是好像比煮美食難~
    等紐西蘭美女研究清楚‧‧‧
    改天再試試~
    謝謝分享^^
  • 呵，不會可以來問問野兔^^

    hare48replied on 2009/01/17 13:27

  • #17 summer on 2009/01/25 14:26

  • 那請問一下，你的banner，他的size是多大？
    是只有圖？不含右邊你的blog名稱是嗎？

    因為我最近申請了一個帳號，但版面一直搞不定，那個banner的尺寸一直不對>_<
  • 啊，我沒看到你的留言，太不好意思了

    每個不同的CSS它的Banner 圖片的 size 都不同
    初學的話可以先看原來的圖片大小
    然後把想要放上去的照片裁成跟原本一樣的大小
    這樣版面通常就不會亂掉了！

    真的很不好意思現在才看到留言= =|||

    hare48replied on 2009/02/13 21:06

  • #18 amway6712426 pixnet user on 2009/02/03 13:12

  • 真的不會...哈
  • 妳的版型不太適合這方法(怕會破壞BLOG畫面)
    ^^ 妳的玫瑰就很美了呀！

    hare48replied on 2009/02/03 19:16

  • #19 davy pixnet user on 2009/02/10 15:58

  • 啊 這個變換Banner的方法被我找到了耶 (大心)

    我想我得花一點時間摸索看看了...

    謝謝分享XD
  • 有問題再回來問問野兔吧

    hare48replied on 2009/02/10 19:03

  • #20 drivemengman pixnet user on 2009/02/13 20:16

  • 那語法是放進#header{ }裡面
    是任何地方嗎？
    我有把background: ;那行刪掉
    但我用卻沒有出現圖片
    說圖片要改是要改什麼？
  • 程式碼有放到公告區內嗎？(或是其它的側邊欄位)，如果放在公告區要記得把公告打開。

    #header{ } 裡的
    background: ;
    刪掉，這樣應該就可以了
    有問題再回來問問野兔，我會去過去看一下你有沒有弄錯

    hare48replied on 2009/02/13 20:21

  • #21 drivemengman pixnet user on 2009/02/13 20:45

  • 很抱歉..因為昨天才從無名搬到痞客邦
    不太懂，公告區是指哪？要怎開放呢？
    感謝
  • 歡迎加入PIXNET
    公告的設定
    首先到pixnet後台管理→側邊欄位設定
    應該就可以看到公告區塊了，然後點公告區塊下的設定，就可以在裡面操作
    加入PIXNET還可以再加入部落軌道唷！
    http://hare48.pixnet.net/blog/post/25101375
    來這裡看看吧！對人氣的提升蠻有用的
    申請網址
    http://www.blog-orbit.com/refer.php?id=hare48

    hare48replied on 2009/02/13 20:58

  • #22 drivemengman pixnet user on 2009/02/13 21:07

  • 我成功了！ 謝謝
  • 恭喜唷！^^

    hare48replied on 2009/02/13 21:09

  • #23 cake1020 pixnet user on 2009/03/28 05:57

  • 改成功了^^!謝謝你喔....
    不過想請問一下，為什麼圖片會比較短呢？
  • 我也在研究為什麼會變短?
    妳的header先改成下面這樣
    #header{
    height:210px;
    background-position: 1px 1px;
    padding:1px;
    margin-bottom:1px; }

    接著在banner h2 裡加入「 height:55px; 」，這樣右邊那個圖的高度就會正常了
    #banner h2{
    width:345px;
    height:55px;
    }

    然後找到#content 把內容改成下面這樣
    #content{
    width:608px ;
    float:left ;
    background:#DDD ;
    padding:0px ;
    color: #000;
    *margin-left: 187px !important;
    margin-left: 188px ;
    *margin-left: 95px ;
    word-wrap : break-word;
    }

    至於變短的問題等妳上面改好後我再研究一下

    hare48replied on 2009/03/28 08:42

  • #24 cake1020 pixnet user on 2009/03/29 01:11

  • 我把上面你說的那三個步驟，全都貼到ccs裡了，但是發現好像沒有任何變化耶～
  • 呵，有很多些許的變化，上面三個是修正原本的CSS錯誤，改好後IE6才能顯示正確的網頁

    接下來妳把那個banner的圖檔改成 646px╳210px 的大小，或是寬為646px，應該就OK了

    hare48replied on 2009/03/29 08:21

  • #25 cake1020 pixnet user on 2009/03/29 11:04

  • 改完了，但好像變更短了＠＠
  • 妳把那個banner的圖檔改成 646px╳210px 的大小，或是寬為646px

    因為妳那圖的寬是600px所以會短

    hare48replied on 2009/03/29 18:46

  • #26 cake1020 pixnet user on 2009/03/29 19:02

  • 我又來麻煩你了，我查了EXIF的資訊。圖片大小確定已經改成646*210了，不是600耶~
  • 咦？
    這張圖嘛！
    http://p8.p.pixnet.net/albums/userpics/8/7/1730487/49cee156a5b1e.jpg

    我看到的是600x195

    hare48replied on 2009/03/29 19:06

  • #27 cake1020 pixnet user on 2009/03/29 19:06

  • 請問一下我看了原始檔案，確定是646*210，但是為什麼上傳到PIXNET就改變了？要怎麼傳才能不改變呢？
  • 先到相簿後台的基本／進階設定，上傳與縮圖設定，上傳時保留原始尺寸相片改成「是」

    hare48replied on 2009/03/29 19:14

  • #28 cake1020 pixnet user on 2009/03/29 19:25

  • 我已經改成”是”了，上傳後檔案還是一樣耶～>.<
    問到都快不好意思了，等等有問題我用會客室問好了，才不會全變成我的留言（羞）
  • 呵，那我也用妳家的會客室

    hare48replied on 2009/03/29 21:59

  • #29 cake1020 pixnet user on 2009/03/30 00:58

  • 我終於成功了>"<
    原來找到圖片點進去，還要再點一次讓他變大。
  • 嗯嗯，因為我也忘了這一點
    看到妳的BLOG文內的圖大小，還以為是別問題...

    hare48replied on 2009/03/30 09:45

  • #30 hiw1210 pixnet user on 2009/12/06 11:39

  • 您好,感謝您分享的方法,我試過了,也沒問題!
    我想再請問一下,圖片的部份可以用FLASH嗎?(我已上傳至網頁,可以取得 .SWF檔)
    我試過,但不會秀出來耶,要怎麼用ㄚ?
    Thanks so much!!
  • 這方法不適用flash檔唷！

    hare48replied on 2009/12/06 19:18

Comment Permissions: Allow commenting

Leave Comment

*Name/Nickname
E-mail
Personal Website
Comment Title
*Comment
* Private Comment