2007年7月6日 星期五

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



進階網路運用

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


適合程度： 初學者 一般程度 進階者 以上均宜


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

貳、一般處理超鏈結的底線及外框線方式：
01.純文字我們會使用 CSS 語法，來消除超鏈結底線：
◎適用於單一鏈結標籤。
◎CSS inline 樣式語法：
<!--就是下面這一段 CSS 語法-->
<A Href="ok.htm" style="text-decoration: none">加入 CSS inline 樣式</A>
<!--就是上面這一段 CSS 語法-->
☉其實這不算是消除超鏈結產生的四周虛框線，只是讓它沒超鏈結底線而已。
☉本標籤語法適用於 Internet Explorer、Mozilla Firefox 及 Netscape 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 Explorer、Mozilla Firefox 及 Netscape 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 Explorer、Mozilla Firefox 及 Netscape 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 Firefox 及 Netscape 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 Firefox 及 Netscape 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 Explorer、Mozilla Firefox 及 Netscape 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 Explorer、Mozilla Firefox 及 Netscape 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 Explorer、Mozilla Firefox 及 Netscape 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 Firefox 及 Netscape 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 Firefox 及 Netscape 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 Firefox 及 Netscape Browser 不受影響。

捌、用於 Flash 特效要怎麼做：
01.這是傳統未加消除四周虛框線的 Flash 特效：
☉本標籤語法只有 Internet Explorer 會有虛框線，對於 Mozilla Firefox 及 Netscape 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 Firefox 及 Netscape 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 Firefox 及 Netscape Browser 瀏覽器不受影響。

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

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

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


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

　

《訂閱/取消電子報 》　《申請免費信箱》　《 客服中心》　《刊登廣告》

本電子報內容由電子報報主提供， 智邦生活館電子報發報中心代理發行
作自己的媒體，唱自己的歌

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)