> > CSS滑鼠換圖

CSS滑鼠換圖

一般的滑鼠換圖做法都是使用 Dreamweaver 內建的 JavaScript 功能
在此只使用簡單的 CSS 就能實現
只要妥善運用 a 的屬性即可

1.插入以下 CSS 程式碼

CSS 程式碼
.mouse_btn {
width: 215px;
height: 90px;
background: url(圖片) no-repeat 0px 0px;
display:block;
}
a.mouse_btn:hover {
background-position: 0px -90px;
}

2.直接引用樣式
HTML 程式碼
<a href="網址" class="mouse_btn"></a>

Page Lab : CSS 滑鼠換圖
下載 CSS 滑鼠換圖範例壓縮檔
<!--
補充說明一
兩張圖片的總合大小比一張圖片的檔案還要大
所以在這裡我把背景圖片作成一組
不止在檔案管理上比較方便
載入圖片時也比較有效率
但要記得要算好背景圖片的顯示定位
-->
<!--
補充說明二
既然如此作成一組比較好
為什麼我們以前還要切成多張圖呢?
我個人認為以往受限於頻寬的不足
所以大部分的做法都是切成多張圖分別載入
由於在前景逐個載入
使用者能夠直接看到
會感受到網頁確實有在載入
但是這是一種不得不的妥協
在頻寬比較大的今日已無這種顧慮
雖然如此
圖片太大還是不建議使用這種做法
-->
<!--
補充說明三
三張圖片為同樣的壓縮比例
可下載 CSS 滑鼠換圖範例壓縮檔
看看兩張圖片的檔案總合大小是否比一張圖片的檔案還要大
-->