Change Link Font Color

改變聯結字型顏色範例

聯結上的動態效果: 一般網頁的設計者除了在網頁的文字和多媒體等實質內容上費心外，聯結標籤也是一大設計重點。因為撇開網頁導覽的流暢不談，純就頁面觀賞來說，如何讓聯結標籤醒目、美觀，就足以煞費苦心了。在靜態的 HTML 網頁時期，一般的設計者就用不同其他本文的文字字體顏色，以及圖形兩種方式來設計聯結標籤。到了 DHTML 動態網頁的時代，延續這個傳統，增加了瀏覽者在滑鼠游標移入移出標籤時，動態改變聯結標籤的文字字體、顏色或圖片，從而使聯結標籤更醒目、更有通知效果。

改變圖形標籤與改變文字的比較: 或許各位以為圖形當然比文字複雜，所以動態改變標籤的文字字體或顏色應該比改變標籤圖形容易，或許就電腦內部處理動作來說，是的。但如果以 Script 操作網頁物件，尤其是跨瀏覽器網頁撰寫來說，改變聯結標籤的字體及顏色，要比改變聯結標籤圖形，在複雜程度上多出好多倍。主要就是卡在瀏覽器為網頁元件設定改寫能力時，圖片的抽換，可以利用 <IMG> SRC 屬性的重設，輕易達成，這在支援 Script 的早先版本的瀏覽器都有能力做到。但文字的改寫、字體顏色的轉換，是直到 IE 4 推出動態 CSS 物件，以及 NS 4 推出 LAYER 動態改寫標籤以後，動態改變聯結標籤的字體及顏色，才成為可能。關於動態抽換聯結標籤圖片的詳細說明，請參考隨滑鼠變換的圖形連結按鈕範例，因為我們本篇主要是討論變更聯結的字體及顏色，對圖形變換就不再贅述。

Internet Explorer 如何改變聯結的字體及顏色

IE4.0 以後，幾乎所有網頁標籤都支援靜態 CSS 和動態改寫 style 物件，所以改變聯結字體及顏色是非常容易的事。你可以這樣安排：

<A HREF="#"
 onmouseover="this.style.color='red';"
 onmouseout="this.style.color='blue';"
 onclick="alert('顏色變成紅色囉!!');return false;">
 改變聯結顏色</A><BR>

<-- onmouseover 是表示當滑鼠游標移入聯結標籤時，這裏是設成字型轉變為紅色。 -->
<-- onmouseout 是表示當滑鼠游標移出聯結標籤時，這裏是設成字型轉變為藍色。 -->
<-- onclick 是表示當在聯結標籤上按滑鼠鍵時，這裏是顯示一訊息框。 -->

如果你現在用的就 IE4 以上版本的瀏覽器在閱讀本網頁，那按這裡看看效果吧。

Netscape 的改寫元件: Netscape 的可動態改寫元件就比較貧乏，在 4.0 版以前，能夠被 Script 操作，動態改變的網頁標籤，就只是 FORM 表單附屬元件的 value 屬性，及 IMG 標籤的 SRC 屬性，問題是這兩個標籤，都不適合當文字型態的聯結標籤來用。真要有適合的改寫元件，只剩下 4.0 版新推出的 LAYER 標籤了，至於許多人或許會問，為何不用 CSS 的 COLOR 屬性呢，那是因為 NS 所謂的 CSS 支援，是靜態的，除非你用 document.write() 方法重新改寫網頁，否則它不像 IE 一樣可以單獨的抽換某個標籤的 CSS 屬性。所以要討論動態改變聯結標籤的字體及顏色，就必須去探討 LAYER 元件的運作特性，如果你現在正用的是 Netscape 4.0 以上的瀏覽器在瀏覽本網頁，請跟著我做後面幾節的測試。

動態更改 LAYER 元件的背景色

就文字聯結標籤上，LAYER 元件支援的相關動態改變屬性只有一項，那就是 bgColor (背景顏色屬性)，譬如你可以這樣的安排：

<A HREF="#"
 onmouseover="document.layers.layer2.bgColor='yellow';"
 onmouseout="document.layers.layer2.bgColor='white';"
 onclick="alert('本標籤會隨滑鼠游標移入移出而更換背景色');return false;">
<ILAYER ID="layer2">隨滑鼠游標移動更換背景的聯結</ILAYER></A>

<-- 先用一個 IMG 標籤包住一個 ILAYER 標籤，IMG 負責偵測滑鼠移動， -->
<-- ILAYER 負責文字顯示及底色更改，並取名 layer2 以供 Script 呼叫。 -->

<-- onmouseover 是表示當滑鼠游標移入聯結標籤時，把 layer2 底色轉為黃色。 -->
<-- onmouseout 是表示當滑鼠游標移出聯結標籤時，把 layer2 底色還原為白色。 -->

你按這裡就可以看到 Netscape 抽換 LAYER 元件底色的效果。所以如果這樣的效果就足以滿足你的需求，那麼 Script 複雜度可以說是最單純的網頁，而且做 Cross Browser Page 也是最少困擾的網頁，因為你可以把上面的 ILAYER 標籤改為 <SPAN>後，再為其設定 STYLE="position:relative;" 的 CSS 屬性，就能使 Netscape 把這個 SPAN 標籤當做擬 ILAYER 標籤來處理，從而取得動態改變 SPAN 標籤 bgColor 屬性的能力(有關如何用 CSS position 屬性來使 Netscape 將一般網頁標籤擬 LAYER 化的說明，請自行參考如何做一個 IE 和 NS 雙用的下拉功能選單一文。)所以稍做更動後的 HTML ，在 IE 和 NS 裏顯示都不成問題，至於在 Script 裏，則要稍為判斷一下瀏覽器如下：

/* 適用 NS4 ，因為只有 NS4 有 layers 集合物件。 */
if (document.layers) {document.layers.LayerID.bgColor=ColorValue;}

/* 適用 IE4 ，因為只有 IE4 有 all 集合物件。 */
if (document.all) {LayerID.style.backgroundColor=ColorValue;}

至於更改後的效果，不管你現在使用的是 IE or NS ，只要 4.0 版以上，就可按這裡來試試看。

不同操作方式的 fgColor 與 bgColor

如果你還是不滿足，一定要改變文字型態聯結標籤的字體或文字顏色，就開始跟我做一連串的 LAYER 奇怪特性的測試吧。既然 LAYER 元件的直屬屬性只有 bgColor( 背景的顏色)，而無 fgColor(前景顏色，也就是文字本身顯示的顏色。)那我們就繼續向它的下屬物件，document 去尋找，果然有 bgColor ，也有 fgColor 屬性，不過你別高興的太早，和 LAYER 一樣，只有 bgColor 能夠獨立被改變，fgColor 則只在你執行 document.write() 後才會產生作用。譬如我們的改變 fgColor 的 JavaScript 是這樣：

var a,b,c;

function ChangeFrontColor()
{
    var cvalue=(a)?"black":"red";
    a=!a;
    document.layers.layer1.document.fgColor=cvalue;
}

而用 write 改寫方法的 JavaScript 是這樣：

var a,b,c;

function WriteFrontColor()
{
    var cvalue=(b)?"black":"red";
    b=!b;

    var doc=document.layers.layer2.document;
    doc.open();
    doc.fgColor=cvalue;
    doc.write("重寫改變 layer 前景色");
    doc.close();
}

執行結果請按這裏這裡。由範例頁即知，直接設定 fgColor 是沒有作用的，改變之道只有重新 write 一途，既然要 document.write ，那當然 layer 中的文件要怎麼改都可以了，所以作者小小騷包一番，做了能放大字體的按鈕，其 JavaScript 如下：

var a,b,c;

function WriteFontSize()
{
    var fs=(c)?"":"+2";
    c=!c;

    var doc=document.layers.layer3.document;
    doc.open();
    doc.write('<FONT SIZE="'+fs+'">重寫改變 layer 字體大小</FONT>');
    doc.close();
}

LAYER document.write() 的限制: 你或許覺得，既然 layer.document.write() 可以澈底改寫 layer 的內容，那就用它解決一切字體顏色問題好了。但 write 使用，並非所有 layer 型態元件都適用，我們都知道 Netscape 中 layer 型態元件有兩個，一是 LAYER ，一是 ILAYER ，很糟糕的一點是 document.write() 的辦法在 ILAYER 上是無法正常顯示的(詳情請見 NS 對 CSS position 的特殊處理)。所以堅持字體大小及顏色改變的結果，就表示 ILAYER 和 CSS position:relative 的擬 ilayer 元件已經出局，只有 LAYER 和 CSS position:absolute 的擬 layer 元件可以適用。這意味著我們開始要面對絕對位置最麻煩的元件定位問題，而無法使用 relative 元件自動諧調文字圖形的能力 (詳情請見 NS 對 CSS position 的特殊處理)。

事件驅動的限制

一般做 Link 動態效果處理時，我們幾乎都是在滑鼠指標移入移出時更改字型顏色及字體大小，因此如何在 Link 上偵測 MouseOver 和 MouseOut 事件就變的十分重要。Netscape 的 layer 元件組，只有標準的 LAYER 標籤能偵測到 MouseOver 和 MouseOut 事件(詳情請見 NS 對 CSS position 的特殊處理) ，因此用 CSS position:absolute 的擬 layer 元件又宣告出局，因此如果堅持要在 Netscape 中動態改變 Link 字型顏色及字體大小的人，最後只能使用 Netscape 的 LAYER 標籤來達成，如此在撰寫跨瀏覽器網頁時，你又必須去處理別家瀏覽器無法處理 LAYER 標籤的問題。聰明的你或許想到，那用 <A> 的 Link 標籤做滑鼠偵測器，用 CSS position:absolute 的擬 layer 元件當改寫元件，不就可以 Cross Browser 了嗎？我也想到了，因此我用下面的 HTML 來試：

Link 當滑鼠事件偵測器：
<LAYER ID="layer1">
<A HREF="#" CLASS="go" 
 onmouseover="ReWriteLink('layer1',true)"
 onmouseout="ReWriteLink('layer1',false)"
 onclick="alert('動態改寫 Link 測試');return false;">
改寫標籤 A
</A>
</LAYER>

LAYER 當滑鼠事件偵測器：
<LAYER ID="layer2"
 onmouseover="ReWriteLink('layer2',true)"
 onmouseout="ReWriteLink('layer2',false)">
<A HREF="#" CLASS="go"
 onclick="alert('動態改寫 Link 測試');return false;">
改寫標籤 B
</A>
</LAYER>

至於執行結果請按這裏。或許你還會說你是用 Layer 包 Link 才有這現象，如果是 Link 包 Layer 如下：

Link 當滑鼠事件偵測器：
<A HREF="#" CLASS="go" 
 onmouseover="ReWriteLink('layer1',true)"
 onmouseout="ReWriteLink('layer1',false)"
 onclick="alert('動態改寫 Link 測試');return false;">
<LAYER ID="layer1">
改寫標籤 A
</LAYER>
</A>

Link 不被改寫，就不會有這現象，不幸的是，如果你真如此做，那個 <A> 標籤根本不被 Netscape 承認還是 Link 標籤，也就是說不管你 MouseOver,Out,Click ，一概沒有反應，此一現象，如你有興趣，請自行測試，我們就不再舉例了。

另闢徯徑

行文至此，各位是否覺得有些喪氣呢？的確，為了讓 Link 的文字動態換一下醒目色，竟然如此囉里八瑣，卡東卡西，雖說不是絕對做不到，但要花的功夫，真讓人懷疑是否值得。作者在實驗時，也真是給它有夠不甘心的，但突然我靈機一動，心想 layer 元件的 fgColor 屬性既然這麼難改，為何不打打別的動態屬性的腦筋呢？於是我想到 visibility 這個動態屬性，如果把兩個 layer 元件疊在一起，使用同樣的文字內容，但給它設定不同的顏色，當滑鼠移入時就把上面那個藏起來，讓使用者看到下面那個 link ，當滑鼠移出時，就把上面那個再回復顯示，如此雖然我們沒有去改 fgColor ，但一樣讓瀏覽者有動態變色的效果。而且這麼做有兩個好處：

不管 layer,擬 layer,ilayer,擬 ilayer ,都支援動態 visibility 效果，使得製作 IE and NS 雙用的網頁得到很大的簡化。
上下相疊的 Link 標籤，一個用 absolute 以利改變顯示狀態，一個用 relative 利於與網頁其他內容版面位置協調。

於是我在 HTML 中做如此佈置：

<SPAN ID="item1" STYLE="position:absolute;">
    <A HREF="#" CLASS="go"
        onmouseover="ChangeLinklike('item1',true)">
        選項一</A>
</SPAN>

<SPAN STYLE="position:relative;">
    <A HREF="#" CLASS="come"
        onmouseout="ChangeLinklike('item1',false)"
        onclick="alert('你按了第一個選項聯結');return false;">
        選項一</A>
</SPAN>

...... 其他上下成對 Link 標籤組 ......

然後在 Script 區段中做這樣的 function：

/* 切換各 Link 標籤容器顯示狀態的自訂函數
   參數 lname 標籤容器名稱，isin 滑鼠是移入還是移出。 */
function ChangeLinklike(lname,isin)
{
    var showstr=(isin)?"hidden":"visible";
    var showstyle;

    if (document.all) {showstyle=eval(lname+".style");}
    if (document.layers) {showstyle=eval("document.layers."+lname);}
    showstyle.visibility=showstr;
}

執行結果請按這裏。雖然談了如此之多，結果竟是給你個不是原來問題的答案，但我還是覺得這個範例是能兼顧 Cross Browser 的好方法。如果你也覺得如此，希望了解全部的 DHTML Code 的安排，請按打包下載，離線閱讀。

回前頁