Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

第三階段【網頁製作系列報導】電子報【進階網路運用】

進階網路運用

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

貳、一般處理超鏈結的底線及外框線方式:
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="http://home.pchome.com.tw/soho/leeweng/html/06/images/exp.gif" border="0" width="44" height="22"></A>
<!--就是上面這一段 HTML 語法-->
其實這不算是消除超鏈結產生的四周虛框線,只是讓它消失不雅的外框線而已。
本標籤語法適用於 Internet ExplorerMozilla FirefoxNetscape Browser 瀏覽器。

參、消除超鏈結產生的四周虛框線,最簡單的初級辦法:
利用 JavaScript 程式個個擊破:
01.用於純文字,適合單一鏈結標籤或超鏈結不多的網頁。
本 JavaScript 程式語法:
<!--就是下面這一段 JavaScript 程式-->
<A Href="ok1.htm" onfocus="this.blur()">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 瀏覽器,只能適用 onfocus="this.blur()" 這個。

02.用於圖檔標籤個個擊破,適合單一鏈結標籤或超鏈結不多的網頁。
本 JavaScript 程式:

<!--就是下面這一段 JavaScript 程式-->
<A Href="ok2.htm" onfocus="this.blur()"><img src="http://home.pchome.com.tw/soho/leeweng/html/06/images/exp.gif" border="0" width="44" height="22"></A>
<!--就是上面這一段 JavaScript 程式-->
本標籤語法完全適用於 Internet Explorer Netscape Browser 瀏覽器,Mozilla Firefox 瀏覽器,只能適用 onfocus="this.blur()" 這個。

肆、消除超鏈結產生的四周虛框線,中級辦法:
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 僅圖檔適用。

伍、消除超鏈結產生的四周虛框線,高級辦法:
如何才能大量或一次就消除網站上,所有超鏈結產生的四周虛框線問題?
如果您只能使用上述的 Onfocus="this.blur()",這個 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 內加入 onFocus="this.blur()"> 即可:
Html 表單按鈕語法:
<!--就是下面這一段 JavaScript 程式-->
<input type="button" VALUE="測試二" onClick="window.open('ok2.htm','body')" onFocus="this.blur()">
<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/ 目錄內。
歡迎大家前往最新完工的網頁教學 議題討論版 ,發表您的看法或建議,讓彼此更能互動受惠。

拾、結論與建議:
本報每篇報導都花上很多時間搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
本電子報 第三階段 報導資料,將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
強烈建議您【學會 HTML 語法】,她真的簡單易學,懂了她您就能駕馭她,將【所見即所得】軟體當做輔助工具吧。
為因應網友要求,本報自即日起全面改為 索取教材資料 方式 ,繼續提供及服務有此需求網友
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的兩套光碟片,則是我們的誠意而已
本報導內容或資料,因限人力、時間,非 索取教材資料包含線上指導 網友,不接受任何疑惑解答,敬請見諒。
本報導 非會員 可免費訂閱及享用我的電子報報導成果,而 會員 則可以進一步取得所有資料與線上指導。
本站所有報導資料,歡迎網友免費加入鏈結,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。

第三階段 96.06.30. 發行第 36 期
更多 精彩報導 文章

© 網頁研習室【電子報】李文能 主編 ©