[CSS] 使用自訂圖片取代選單文字

這是之前格友 Queen 提過的問題，稍微整理一下方法跟原理吧！

使用國內的「無名」、「Pixnet」等 BSP 的朋友，部落格的選單連結已經是 html 寫死的狀態，也就是說，如果不刻意去控制的話，預設的選單就是「相簿、部落格、留言、名片」這樣的連結文字，加上 Windows 作業系統對中文字型先天上支援不足，幾個大拉拉的電腦字就杵在那裡。雖無大礙，但是若能替換自訂的圖片，增加裝飾性與主體整體性的話，視覺就更棒了！

由於各家 BSP 結構不盡相同，各主題之間樣式差異頗大，在此需先做一個模型，我以「Pixnet」的架構為例子，樣式則假設為橫式選單。

html架構原始碼如下：

<ul id="navigation">
    <li id="link-album"><a href="/album/">相簿</a></li>
    <li id="link-blog"><a href="/blog/">部落格</a></li>
    <li id="link-guestbook"><a href="/guestbook/">留言</a></li>
    <li id="link-profile"><a href="/profile/">名片</a></li>
</ul>

CSS 樣式表如下：

#navigation {
    background-image:url(bg.jpg);
    background-repeat:repeat-x;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
}

顯示結果：

Step 1 替換自訂圖片

準備好自訂的背景圖片。最簡單的作法就是直接製作一整張底圖。以這個例子來說，就是製作一張寬：400px，高：35px的圖片，上面有設計好的與整體部落格風格搭配的背景，連結的文字也一併使用非電腦字的字體設計。上傳之後，修正 CSS 如下紅字：

#navigation {
    background-image:url(新自訂圖片.jpg);
    background-repeat:no-repeat;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
}

顯示結果：

Step 2 隱藏連結文字

上面可以看到預設的連結文字與我們自訂圖片上得文字產生重疊，只要想辦法把文字隱藏起來就可以了！修正 CSS 如下紅字：

#navigation {
    background-image:url(新自訂圖片.jpg);
    background-repeat:no-repeat;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
    font-size:0;
    *text-indent:-9999px;
}

顯示結果：

完成！！很簡單吧！

事實上，在 FireFox 底下，只要下「font-size:0;」屬性，文字就會被隱藏起來了，但 IE 不認這個屬性，所以我們必須在加上 only for IE 的屬性 「*text-indent:-9999px;」，這樣 IE6、IE7 都能正確的顯示出自定圖片之後的選單了！

另外一個重點在於 <a> 這個元素一定要給予高度「height」的屬性！如此才能確保當連結文字被隱藏之後，使用者還能正確點選連結！高度值最好與背景圖片設定相同。

進階

如果想要花俏一點，製作出滑鼠指向效果，也就是當使用者把滑鼠移到選單上面後會產生變化，我們該怎麼做呢？

Step 1 準備自訂圖片加上效果圖片

以上面的樣式為例，我希望平時選單為黑底白字，滑鼠指向選單上面的時候，才出現霓虹的效果。除了將「自訂圖片」改為白色的字之外，還必須為各各連結(這裡是4個)準備不同的效果圖片。

Step 2 CSS樣式修改

依照上面的 CSS 為基礎，再分別新增下列屬性：

#link-album a:hover,#link-album a:active{
    background-image:url(01_over.jpg);
    background-repeat:no-repeat;
}
#link-blog a:hover,#link-blog a:active{
    background-image:url(02_over.jpg);
    background-repeat:no-repeat;
}
#link-guestbook a:hover,#link-guestbook a:active{
    background-image:url(03_over.jpg);
    background-repeat:no-repeat;
}
#link-profile a:hover,#link-profile a:active{
    background-image:url(04_over.jpg);
    background-repeat:no-repeat;
}

其中「#link-album」代表「相簿」按鈕，「#link-blog」則是「部落格」，「#link-guestbook」則為「留言」，最後「#link-profile」則是「名片」。而 01_over.jpg~04_over.jpg 代表各單元按鈕的效果圖片。「#」後面的名稱，各家 BSP 結構不相同，可以開啟網頁原始碼來得知，FireFox 使用者則可以利用 FireBug 套件來觀察元素。通常結構都會是<li id="xxxxx">，這裡 id 名稱 xxxxx，在CSS裡面就是 「#xxxxx」。

顯示結果：