進階網路運用

第六篇
如何消除超鏈結產生的四周虛框線

適合程度: 初學者 一般程度 進階者 以上均宜
壹、超鏈結的虛框線應算是網頁外觀小殺手:
當你點選超鏈連結或按鈕時,該連結目標位置四周旁邊是不是會出現不太好看的虛線框外觀?
這是 HTML 標籤的預設(默認)值,當初目的是要讓使用者明確知到您已觸動這個功能,並無不妥。
在追求網站製作完美的要求下,您可能已對此產生這個疑問:如何消除超鏈結產生的四周虛框線?
超鏈結所產生的四周虛框線,包括文字、圖檔、表單按鈕、影像地圖,甚至當紅的 Flash 特效。
因為它不是網頁錯誤的問題,或許到現在為止,您還沒發現這個不起眼的小問題,讓我詳細告訴您吧。

貳、一般處理超鏈結的底線及外框線方式:
01.純文字我們會使用 CSS 語法,來消除超鏈結底線:
適用於單一鏈結標籤。
CSS inline 樣式語法:
<!--就是下面這一段 CSS 語法-->
<A Href="ok.htm" style="text-decoration: none">加入 CSS inline 樣式</A>
<!--就是上面這一段 CSS 語法-->
其實這不算是消除超鏈結產生的四周虛框線,只是讓它沒超鏈結底線而已。
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。

02.另一種純文字 CSS 語法方式:
適用於整頁鏈結標籤。
Html 元素樣式語法:
<!--就是下面這一段 CSS 語法-->
<STYLE type="text/css">
<!--
A:link {text-decoration: none}
A:hover {text-decoration: none}
A:active {text-decoration: none}
A:visited {text-decoration: none}
-->
</STYLE>
<!--就是上面這一段 CSS 語法-->
其實這不算是消除超鏈結產生的四周虛框線,只是讓它沒超鏈結底線而已。
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。

03.圖檔我們會使用 HTML 標籤原有的外框線 (Border) 功能:
適用於單一圖檔鏈結標籤。
Html 圖檔鏈結語法:
<!--就是下面這一段 HTML 語法-->
<A Href="ok.htm"><img src="images/exp.gif" border="0" width="44" height="22"></A>
<!--就是上面這一段 HTML 語法-->
其實這不算是消除超鏈結產生的四周虛框線,只是讓它消失不雅的外框線而已。
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。


參、消除超鏈結產生的四周虛框線,最簡單的初級辦法:
利用 JavaScript 程式個個擊破:
01.用於純文字,適合單一鏈結標籤或超鏈結不多的網頁。
本 JavaScript 程式語法:
<!--就是下面這一段 JavaScript 程式-->
<A Href="ok1.htm">link1</a>
<A Href="ok2.htm" hidefocus="true">link2</a>
<A Href="ok3.htm" hidefocus="hidefocus">link3</a>
<A Href="ok4.htm" hidefocus>link4</a>
<!--就是上面這一段 JavaScript 程式-->
程式簡單解說:Onfocus (該網頁取得焦點時)是一個事件, this.blur() 則是被事件所觸發的對象(該網頁失去焦點時)。
本標籤語法完全適用於 Internet Explorer 瀏覽器,Mozilla FirefoxNetscape Browser 瀏覽器,只能適用 這個。

02.用於圖檔標籤個個擊破,適合單一鏈結標籤或超鏈結不多的網頁。
本 JavaScript 程式:
<!--就是下面這一段 JavaScript 程式-->
<A Href="ok2.htm"><img src="images/exp.gif" border="0" width="44" height="22"></A>
<!--就是上面這一段 JavaScript 程式-->
本標籤語法完全適用於 Internet Explorer Netscape Browser 瀏覽器,Mozilla Firefox 瀏覽器,只能適用 這個。


肆、消除超鏈結產生的四周虛框線,中級辦法:
01.利用 CSS 語法控制整頁內的超鏈結:
適合整個網頁所有鏈結標籤。
本 CSS 語法:
<!--就是下面這一段 CSS inline 樣式語法-->
<STYLE type="text/css">
<!--
a {blr:expression(this.onFocus=this.close());}
a {blr:expression(this.onFocus=this.blur());} /* for IE onFocus 的 F 一定要大寫*/
-->
</STYLE>
<!--就是上面這一段 CSS inline 樣式語法-->
注意:a {blr:expression(this.onFocus=this.close());} 這段可以省略。
程式簡單解說:
IE 對 CSS 有一種擴充叫做 expression (表示),很神奇的讓您也可以在 CSS 裡撰寫 JavaScript,寫出一些可以隨狀況改變的 CSS 樣式。
很可惜的是,這個 CSS 語法是 Internet Explorer 瀏覽器專用並不適用於 Mozilla FirefoxNetscape Browser 瀏覽器。

A.另一種適合 ( IE、Firefox、Netscape 瀏覽器) CSS 語法
幸好我們可以再加下面這段語法,就可解決這個問題,至於其他種類瀏覽器,您有就自己試試看吧!
適合整個網頁所有鏈結標籤。
本 CSS 語法:
<!--就是下面這一段 CSS inline 樣式語法-->
<STYLE type="text/css">
<!--
a {blr:expression(this.onFocus=this.close());}
a {blr:expression(this.onFocus=this.blur());} /* for IE onFocus 的 F 一定要大寫*/
:focus { -moz-outline-style: none; } /* for Firefox 及 Netscape 專用*/
-->
</STYLE>
<!--就是上面這一段 CSS inline 樣式語法-->
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。

B.另一種適合 ( IE、Firefox、Netscape 瀏覽器) 的 CSS inline 樣式語法
適合整個網頁所有鏈結標籤。
本 CSS 語法:
<!--就是下面這一段 CSS inline 樣式語法-->
<STYLE type="text/css">
<!--
/* Remove the link outline */
a {noFocusLine:expression(this.onFocus=this.blur());} /* For IE */
:focus {-moz-outline-style: none;} /* For Firefox 及 Netscape 專用*/
-->
</STYLE>
<!--就是上面這一段 CSS inline 樣式語法-->
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。

02.使用 JavaScript 程式全面擊破超鏈結虛框線:
適合整個網頁所有鏈結標籤。
本 JavaScript 程式語法:
<!--就是下面這一段 JavaScript 程式語法-->
<SCRIPT language=javascript>
<!--
window.onload=function() {
for(var ii=0; ii document.links[ii].onfocus=function(){this.blur()}
}
// -->
</Script>
<!--就是上面這一段 JavaScript 程式語法-->
程式簡單解說:運用變數設定超鏈結失焦功能,指定取代本頁所有鏈結標籤。
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。

03.另一種適合 ( IE、Firefox、Netscape 瀏覽器) 的 JavaScript 程式語法
適合整個網頁所有鏈結標籤。
本 JavaScript 程式語法:
<!--就是下面這一段 JavaScript 程式語法-->
<SCRIPT language=javascript>
<!--
if(document.all){
var tags=document.all.tags("a")
for (var i=0;i tags(i).outerHTML=tags(i).outerHTML.replace(">"," hidefocus=true>")}
// -->
</Script>
<!--就是上面這一段 JavaScript 程式語法-->
注意:必需放於所有鏈結的底部喔!
本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla Firefox 完全不適用,Netscape Browser 僅圖檔適用。


伍、消除超鏈結產生的四周虛框線,高級辦法:
如何才能大量或一次就消除網站上,所有超鏈結產生的四周虛框線問題?
如果您只能使用上述的,這個 JavaScript 程式碼來消除超鏈結產生的四周虛框線。
就算您是使用 Ctrl + C (複製)、Ctrl + V (貼上) 快速功能鍵,數十個還好辦,要是超過百個怎麼辦?
若是運用類似 Dreamweaver 這樣強的的網頁編輯器內的尋找下一步驟替換功能,是可減輕一點負擔,但還是不太好用!
很慶幸的是,在瀏覽器設計工程師的努力下,已想到使用一個簡單 HTC 代碼,就能掌控整個網站的超鏈結問題。
還沒開始前先瞭解一下,甚麼是 HTC 文件?
何謂 HTC 文件,全名為 Html Components,是微軟在 IE5.0 後開始提供的一種新的指令組合。
它可以把某種特定功能的代碼封裝在一個組件之中,從而實現了代碼的重復使用功能。
一個 htc 組件裡面包含了屬性、方法、事件等等各種用法,這裡就不詳細介紹,有興建請參考微軟的 msdn 主頁。
運用 HTC 文件控制網站內全部的超鏈結:
適合整個網頁所有鏈結標籤。
本 HTC 文件語法(製作方法)如下:
01.先在記事本或任何文書編輯器打入以下語法:
<public:attach event="onfocus" onevent="example()" />
<script language="javascript">
function example() {
this.blur();
}
</script>
02.將以上代碼存為 .htc 為擴展名的副檔名文件:(下載 link.htc)
03.然後使用 CSS inline 樣式語法:
<!--就是下面這一段 HTC 文件語法-->
<STYLE type="text/css">
<!--
A {behavior:url(htc 文件所在路徑地址)}
-->
</STYLE>
<!--就是上面這一段 HTC 文件語法-->
04.套用到 <HEAD> ... </HEAD> 網頁內:
套用到 CSS inline 樣式語法內說明:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
A {behavior:url(link.htc)}
-->
</STYLE>
</HEAD>
<BODY>
<a href="URL">鏈結1</a>
<a href="URL">鏈結2</a>
<a href="URL">鏈結3</a>
</BODY>
</HTML>
05.點鏈接試試,應該已沒有虛線框了
您只要在每一頁的 ... 內,插入這段 CSS inline 樣式語法,這樣是不是精簡多少?再多網頁也不怕了。
本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla Firefox 完全不適用,Netscape Browser 僅圖檔適用。

陸、表單按鈕要怎麼做:
01.只要在 <input 內加入> 即可:
Html 表單按鈕語法:
<!--就是下面這一段 JavaScript 程式-->
<input type="button" VALUE="測試二" onClick="window.open('ok2.htm','body')">
<input type="button" VALUE="測試三" onClick="window.open('ok3.htm','body')" hidefocus="true">
<!--就是上面這一段 JavaScript 程式-->
也可以改用 hidefocus="true" ,請參考用下面 Flash 特效要怎麼做範例。
hidefocus=true" 也可以運用在其他表單標籤,如 radio、checkbox ... ,瀏覽器必須是 IE 5.5 以上的版本才有效果。
本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla FirefoxNetscape Browser 部份適用。

02.如果這頁表單很多按鈕呢?
您也可以套用 JavaScript 程式整頁擊破法,適合單一網頁。
JavaScript 表單按鈕程式語法:
方法很簡單,套用前範例中級辦法 022,將 tags("a") 改成 tags("input")",這樣網頁中所有 input 標籤的虛線框都會不見了
<!--就是下面這一段 JavaScript 程式語法-->
<SCRIPT language=javascript>
<!--
if(document.all){
var tags=document.all.tags("input")
for (var i=0;i tags(i).outerHTML=tags(i).outerHTML.replace(">"," hidefocus=true>")}
// -->
</Script>
<!--就是上面這一段 JavaScript 程式語法-->
注意:必需放於所有表單按鈕的底部喔!
本標籤語法適用於 Internet Explorer 瀏覽器,Mozilla FirefoxNetscape Browser 部份適用。


柒、影像 (Image Map) 地圖要怎麼做:
利用 JavaScript 程式個個擊破。
在鏈結的 Map 的影像檔 Img 裡,加入 hidefocus="true" 就可以了喔!
JavaScript 影像(索引)地圖語法:
<!--就是下面這一段 JavaScript 程式-->
<img src="images/pic.gif" border="0" height="300" width="300" usemap="#pic" hidefocus="true">
<!--就是上面這一段 JavaScript 程式-->
本標籤語法完全適用於 Internet Explorer 瀏覽器,Mozilla FirefoxNetscape Browser 不受影響。


捌、用於 Flash 特效要怎麼做:
01.這是傳統未加消除四周虛框線的 Flash 特效:
本標籤語法只有 Internet Explorer 會有虛框線,對於 Mozilla FirefoxNetscape Browser 瀏覽器不受影響。

共有以下兩種技巧(方法):
02.這是使用 swf.js 程式處理過的狀況:(下載 swf.js)
<!--就是以下這一段-->
<script language=JavaScript>
var swfWidth="350";
var swfHeight="60";
var swfName="webpage.swf";
var swfVars="";
document.write("<script language=JavaScript src=swf.js><\/script>");
</SCRIPT>
<!--就是以上這一段-->
本標籤語法適用於 Internet Explorer 瀏覽器,對於 Mozilla FirefoxNetscape Browser 瀏覽器不受影響。

03.這是使用 swfobject.js 程式處理過的狀況:(下swfobject.js)
<!--就是以下這一段-->
<div id="webpage_id" >看不到時顯示此訊息</div> <!--這一段不能省略-->
<script type="text/javascript">
var fo = new FlashObject("webpage.swf", "webpage", "350", "60", "6", "#FFFFcc");
fo.addParam("menu","false");
fo.addParam("quality","best");
fo.addParam("salign","LT");
fo.addParam("scale","noscale");
fo.addParam("wmode", "#ffffcc"); <!--想透空改用這個 transparent 就可以了-->
fo.write("webpage_id");
</script>
<!--就是以上這一段-->
本標籤語法適用於 Internet Explorer 瀏覽器,對於 Mozilla FirefoxNetscape Browser 瀏覽器不受影響。


玖、本站會員注意事項:
網頁研習室費心製作的 HTML 標籤教學網站,不論您是否已有基礎,都值得您進一步研習的好地方,敬請期待!
為利網友快速取得本報導所相關檔案等資料,歡迎到網頁研習室網站進一步取得完整教材
您也可以加入我們的教學會員免費索取教材,直接由教材光碟 (CD-R) 片內取得更多學習資料。
凡加入教學或教材會員者,均可獲得以下乙份完整的資料光碟。
詳細內容:語法教學第一電子報第二電子報第三期電子報網頁圖窟
本報導所有檔案均存放於 CD:/study/maillist3/html/06/ 目錄內。
歡迎大家前往最新完工的網頁教學 議題討論版 ,發表您的看法或建議,讓彼此更能互動受惠。

拾、結論與建議:
本站所有報導資料,歡迎網友加入鏈結或轉載內容,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ,她真的簡單易學,懂了她您就能駕馭她,讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
本電子報報導資料,未來將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
本報導內容或資料,因限人力、時間,非教學會員,不接受任何疑惑解答,敬請見諒。