Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

  • ルイズルイズ by Rei
    2009/08/20(Thu)14:42:54

網頁教學

多重變化按鈕

2010/08/23 (Mon)
  • 變化按鈕已經是廣為各網站使用的效果了,那是一種滑鼠靠近可讓圖片變化的效果。這個是比那更加強化的效果!當滑鼠靠近,不但能使圖片變化,還能一次變化很多張唷!懂得運用的話,還能做出更多不一樣的變化。

原始碼



設定方式

  • 【增加選項的方式】
     這裡是以 4 組按鈕為例,假若要增加第 5 組,請首先在 Script 第 3 行找出 var btns = 4; 將數字改為 5。
     再複製第 20,21 行 ia[4].src = "parts/04.gif"; ib[4].src = "parts/14.gif"; 往下新增 ia[4].src = "parts/05.gif"; ib[5].src = "parts/15.gif"; 兩行字,其中的 05.gif 和 15.gif 各代表變化前和變化後的圖片。
     往下再復製第 27 行 m[4].src = "parts/f4.gif";,一樣在下面新增 m[5].src = "parts/f5.gif";,f5.gif 代表的是文字區的圖片。
     最後把在 Html 部分的第 6 行 <a href ... onmouseover="slide(4)" ... 一直到 ;</a> 整段複製下來,並且把其中的 onmouseover="slide(4)src="04.gif" 分別改成 (5)、05.gif。

    【注意事項】
     若改變語法位置(如將文字區移動至最後面或將內容移出<div id="btn">...</div>外部),可能會發生錯誤。

取材網站

  • 雖然網站已經消失,不過它的精神永遠與我們同在。 XD

相關回應

目前無相關回應

發表回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

素材、設計