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)的一種,可將檔案轉為另一個檔案。

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

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

導覽列與導覽按鈕的設計方法導覽列設計/微軟網路機器人 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

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題