Navigation Bar & Navigation Buttons Design by Java Scripts
導覽列與導覽按鈕設計3：自訂 Java 滑鼠事件法

各種超連結與導覽 Link Between Webs,站間連結 Meta tag, Redirection,統合標注與重新導向 Target Frame,目標框架 Bookmark: Within Page,頁內書籤 Email Address 連結電子郵件 Icon: Visual Link,圖示連結 Link on a image 圖片連結格式 Link external pics,站外圖片連結 Link Management,連結管理 導覽列與按鈕設計 微軟網路機器人 Webbot 法 導覽列設計/互動式按鈕設計法 導覽列設計/自訂 Java 法 導覽列設計/Html5 CSS 法 導覽列設計/下拉選單與樹狀導覽法 導覽列設計/雙導覽列_多導覽列法 導覽列設計/固定位置導覽列法 Information Map,資訊地圖設計 微軟網站機器人與表現方式 Common Contents,共用內容 Marquee,跑馬燈 Common Contents,共用內容 Navigation History導覽歷史管理 Using Behaviors, 基本Java應用 Redirecting users to a new window 導向新視窗 Messages in status bar狀態列訊息 網路互動與雲端元件應用 Search,搜尋引擎設定 Pop-up Page,彈出網頁 Rotating Banners,動態橫幅 FB Apps,臉書外掛程式 Web Counter 網站計數器 npm: java Node 模組 Other Java Apps,其他Java程式

Web Design: Automations - Epistemological/Digital Aesthetics - Formation Methodology

網站/網頁設計:自動化實作-知識美學/數位美學之建構方法

Links, Navigation and Mata page 超連結、導覽與重新導向

超連結：以<a></a>所構成，各種站間、站內物件的相互連結。

導覽：對具有結構性的內容引導，通常具備按鈕或統一性的視覺設計。

重新導向：是統合標籤(Meta Tag)的一種，可將檔案轉為另一個檔案。

導覽列與導覽按鈕的設計方法

導覽列與導覽按鈕的設計方法，常用的有以下類型：

導覽列設計/微軟網路機器人 Webbot 法

導覽列設計/互動式按鈕設計法

導覽列設計/自訂 Java 法

導覽列設計/Html5 CSS 法

其中以互動式按鈕設計法、與 Html5 CSS 法在效果與未來性上較優。當然，如果程式與美工能力均強，則 Html5 CSS 法應是第一選擇。

除此之外，還有進階的：

導覽列設計/下拉選單與樹狀導覽法

導覽列設計/雙導覽列_多導覽列法

導覽列設計/固定位置導覽列法

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/ 必須改為

/GCot年度/站名資料夾/

首頁

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.HTMLgoodies.com/beyond/javascript/article.php/3470771/Advanced-JavaScript-for-Web-Developers-onClick-and-onMouseOver.htm

其他滑鼠事件特效

http://www.webpage.idv.tw/maillist/maillist2/code/01/01.htm