自訂超連結底線的動畫效果 @ 心琴

在 Dreamweaver 裡雖然沒辦法直接設定有動畫效果的超連結底線, 不過只要準備好 gif 動畫素材, 利用簡單的 CSS 語法就能輕鬆完成了。

改用動畫效果的超連結底線

瀏覽器	IE7	IE6	Netscape 8	Firefox	Mozilla	Opera 8
是否支援	○	○	○	○	○	○

step 1 在網頁中的 <head> 標籤內, 找到原本設定的連結樣式 a:link、a:hover 語法。我們將設定新的連結樣式, 請先刪除此段語法。

step 2 我們定義 1 個新的標籤選取器樣式, 命名為 s1, 請輸入以下語法, 設定滑鼠未移到超連結時的樣式。

.s1{
background: url(ani.gif) repeat-x ←指定背景圖檔(在此為"ani.gif")、
bottom; ←重複方向與位置
padding-left: 4px; ←設定文字與圖檔的左間距
padding-right: 4px; ←設定文字與圖檔的右間距
padding-bottom: 6px; ←設定文字與圖檔的下方間距
color: #ffffff; ←文字色彩
text-decoration: none; ←設定為無底線
}

step 3 接著我們以 s1:hover 語法, 設定滑鼠移到超連結的樣式, 請再輸入以下語法。

.s1:hover {
color: #669900; ←文字色彩
}

TIP：此步驟我們僅改變顏色樣式, 你也可以使用 "background: url(圖檔) repeat-x bottom" 語法, 置換其它圖片製作另一種效果。

step 4 語法輸入完成後, 請在 <XBODY> 標籤內使用語法, 將加入超連結的文字套用我們設定的標籤選取器。您可以按下F12鍵, 開啟瀏覽器預覽效果。

<p>
<a class="s1" href=http://mail.yahoo.com/config/login?/"#" >北部人氣景點</a>
<a class="s1" href=http://mail.yahoo.com/config/login?/"#" >中部經典路線</a>
<a class="s1" href=http://mail.yahoo.com/config/login?/"#" >東部推薦行程</a>
<a class="s1" href=http://mail.yahoo.com/config/login?/"#" >南部必玩景點</a>

●語法解密●
◎背景圖片 (background: url)：
我們插入文字背景圖片的語法為：background: url(圖檔) repeat-x bottom, 其中 background:url 後方以括號填入圖檔檔名；隔 1 個半形空格輸入 repeat-x , 表示圖檔以水平位置重複顯示；再間隔 1 個半形空格輸入 bottom 指定圖檔出現在文字下方。

本範例使用的圖檔是我們事先製作好的動態圖檔, 超連結底線就變成有動畫效果了。您也可以副標名如 jpg、gif、bmp 的靜態圖檔, 將超連結底線替換成任何您想設定的圖案。

◎邊距 (padding) ：
要調整文字與圖片的距離, 則利用 padding 語法加上 top、left、right、bottom 等位置,指定特定方向的樣式。

以本單元為例, 假設未使用 padding 語法調整底線圖片的距離, 圖片就會壓在超連結文字上面。