
Navigation Bar & Navigation Buttons Design by
Java Scripts
導覽列與導覽按鈕設計3:自訂 Java 滑鼠事件法
Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
Links, Navigation and Mata page 超連結、導覽與重新導向
超連結:以<a></a>所構成,各種站間、站內物件的相互連結。
導覽:對具有結構性的內容引導,通常具備按鈕或統一性的視覺設計。
重新導向:是統合標籤(Meta Tag)的一種,可將檔案轉為另一個檔案。
[!Related/Navi.htm]Java: Interactivity and Java Applications
網路互動與雲端元件應用
網路互動是由伺服器後端資料庫所產生的,使用者係經由前端表單(forms)介面呼叫資料庫。當前,也有許多企業-如Google,提供雲端式的互動服務。
許多個人或組織,也提供各種進階自動化元件。其中Java 是廣泛發展各種互動功能的常用語言。
自訂 Java 導覽按鈕滑鼠事件法的程式範本如下。
程式範本
可在共用資料夾(!Related)內,設導覽頁 Navi_left.htm。
<a href="../index.htm"
onmouseover="document.IndexImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/index_over.gif'"
onmouseout="document.IndexImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/index_out.gif'"
>
<img src="index_out.gif" alt="首頁" style="border:0px" name="IndexImg"
/></a><br/><a href="../CollegeYouth.htm"
onmouseover="document.EnglishImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/CollegeYouth.gif'"
onmouseout="document.EnglishImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/CollegeYouth.gif'"
>
<img src="CollegeYouth.gif" alt="CollegeYouth" style="border:0px" name="CollegeYouth.gifImg"
/></a><br/><a href="../Unit_1/Unit_1.htm"
onmouseover="document.fourImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Unit_1.htm.over.gif'"
onmouseout="document.fourImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Unit_1.htm.gif'"
>
<img src="Unit_1.htm.gif" alt="Unit_1" style="border:0px" name="fourImg"
/></a><br/><a href="../Planning.htm"
onmouseover="document.fiveImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Planning.htm_over.gif'"
onmouseout="document.fiveImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Planning.htm.gif'"
>
<img src="Planning.htm.gif" alt="Planning" style="border:0px" name="fiveImg"
/></a><br/><a href="../Assignment.htm"
onmouseover="document.sixImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Assignment.htm_over.gif'"
onmouseout="document.sixImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Assignment.htm.gif'"
>
<img src="Assignment.htm.gif" alt="Assignment" style="border:0px" name="sixImg"
/></a><br/><a href="../Gantt.htm"
onmouseover="document.sevenImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Gantt.htm_over.gif'"
onmouseout="document.sevenImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Gantt.htm.gif'"
>
<img src="Gantt.htm.gif" alt="Gantt" style="border:0px" name="sevenImg"
/></a><br/><a href="../VideoStoryboard_blank.htm"
onmouseover="document.eightImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/VideoStoryboard_blank.htm_over.gif'"
onmouseout="document.eightImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/VideoStoryboard_blank.htm.gif'"
>
<img src="VideoStoryboard_blank.htm.gif" alt="VideoStoryboard"
style="border:0px" name="eightImg" /></a>
個人化導覽按鈕取代
導覽按鈕位址
互動事件命令內之導覽按鈕,必須使用絕對位址。網頁可使用相對位址。
onmouseover="document.IndexImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/index_over.gif'"
onmouseout="document.IndexImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/index_out.gif'"
所有 /!TxCanonWeb/ 必須改為
首頁
index_out.gif 待瀏覽按鈕
index_over.gif 選擇瀏覽按鈕
範本導覽按鈕
Planning.htm.gif' 企畫
Assignment.htm.gif 分工
Gantt.htm.gif 進度
VideoStoryboard_blank.htm.gif 劇本
自訂導覽按鈕
<a href="../Unit_1/Unit_1.htm"
onmouseover="document.fourImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Unit_1.htm.over.gif'"
onmouseout="document.fourImg.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Unit_1.htm.gif'"
>
<img src="Unit_1.htm.gif" alt="Unit_1" style="border:0px" name="fourImg"
/></a><br/>
說明
href="../Unit_1/Unit_1.htm" 所在目錄與網頁實體名
img src="待瀏覽按鈕" alt="網頁虛擬名"
新增自訂導覽按鈕
必須設「物件名」,建議如:UserOne, UserTwo, ...
<a href="../Unit_1/Unit_1.htm"
onmouseover="document.物件名.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Unit_1.htm.over.gif'"
onmouseout="document.物件名.src='http://tx.liberal.ntu.edu.tw/!TxCanonWeb/!Related/Unit_1.htm.gif'"
>
<img src="Unit_1.htm.gif" alt="Unit_1" style="border:0px" name="物件名"
/></a><br/>
警告
onmouseover 的物件名(如 fourImg),不能以數字(如 4Img)開頭。
各按鈕程式之間、程式之內,不得有段落、空白,否則IE,Firefox 將會錯讀。
參考連結
http://pubs.logicalexpressions.com/pub0009/LPMArticle.asp?ID=74
3色鈕
http://www.saljbarry.com/funstuff/rollover_buttons.HTML#
配合 function 法
http://www.study-area.org/coobila/tutorial_272.HTML
滑鼠事件更多應用
其他滑鼠事件特效
http://www.webpage.idv.tw/maillist/maillist2/code/01/01.htm




