CSS 超連結圖片按鈕 (含滑入滑出動作)

CSS 超連結圖片按鈕 (含滑入滑出動作)

程式說明:

利用CSS設定TD裡面的超連結,讓超連結在TD裡面的時候,視覺上就看起來是一個圖片的超連結按鈕。

程式重點在於CSS的設定上面,display:block這句很重要,因為這樣才有辦法設定超連結的大小。

另外,準備兩張圖片,一張是滑鼠還沒滑入之前,另一張是滑鼠滑入之後。

本範例測試在IE 9、Firefox、Chrome瀏覽器都可以正常執行。

 

程式碼如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 超連結圖片按鈕 (含滑入滑出動作)</title>
<style>
.btn a{background-image: url(images/img.png);background-repeat: no-repeat;width:89px;height:20px;display:block;}
.btn a:hover{background-image: url(images/img_over.png);background-repeat: no-repeat;width:89px;height:20px;}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td class="btn"><a href="#" title="">&nbsp;</a></td>
    </tr>
</table>
</body>
</html>
 

 

 

參考或是複製語法時,別忘了留個言喔 ^ ^ ~