Automations: Navigation 3 自動化與互動設計

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

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

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

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

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

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

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