因為 Javascript 裡面只有 Image 物件可供預載(Preload)使用，因此一般美工常用 Macromedia 的圖型預載程式裡面並沒有滑鼠移到某個物件上更換背景圖的功能。
而使用 CSS 就可以做到類似預載的功能，但是實際上在滑鼠移過去的時候，瀏灠器還是會做一個下載的動作，並非真正的預載。這部份網路上說明的文件很多，我就不再多說了。
但是畢竟切換背景圖並非真正的預載，在本機可能看不出來，放到主機上很容易有延遲的狀況產生，為了減少這種感覺，有幾個小技巧可以使用。
先做看一下 CSS 原始檔:
#menuLinkLeft a {
display:block; /*這行不加的話，在 Firefox 瀏覽寬度設定會失效 */
width:140px;
height:24px;
line-height:24px;
color: white;
}#menuLinkLeft a:visited {
color: white;
}#menuLinkLeft a:hover{
color: white;
background: url(滑鼠移上來的圖型) no-repeat;
text-decoration: none;
}
一般純 CSS 的做法是在 a 標籤上也設定一個 background，當滑鼠移開的時候會顯示這個圖型，但是這樣變成要載入二個圖型，延遲會更嚴重。
這時可以搭配表格 TABLE 標籤，在 TD 上先設好一張預設的 background 底圖，讓瀏覽器只要負責處理 hover 的圖型即可。
(註: Netscape 4.0 不支援)
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="預設背景圖">
<span id="menuLinkLeft">
<a href="#">連結</a>
</span>
</td>
</tr>
</table>
使用圖型按鈕: (左邊靠下的 Products 選單)
http://xspo.zinfu.com/
使用純文字 + CSS背景圖: (左邊靠下的 Products 的選單)
http://xspo.zinfu.com/demo
如果滑鼠移上去的圖型顏色是單色系的話，可以在 hover 的部份設定 background 色碼，可以減少延遲的感覺。顏色則儘量接近滑鼠移上去的圖型顏色為主，並搭最底圖做調整最佳的色碼。
CSS 範例:
#menuLinkLeft a:hover{
…………..
background: 色碼 #A6ACAC url(滑鼠移上來的圖型路徑) no-repeat;
…………..
}
希望對大家有幫助，有問題再提出來討論囉。
6 comments On [CSS] 預載切換背景圖型的小技巧
使用圖型按鈕: (左邊靠下的 Products 選單)
http://xspo.zinfu.com/
~這一個不知道是我的錯覺還是原始的設定就是這樣, 當滑鼠移上去之後, 在選單部分四周會出現虛線框(局部).~
使用純文字 + CSS背景圖: (左邊靠下的 Products 的選單)
http://xspo.zinfu.com/demo
~這個是沒啥大問題, 但是只能用 IE 看, 非 IE 會出現位置不對及 arrow 重複出現的情形.~
one image to rule them all 🙂
http://wellstyled.com/css-nopreload-rollovers.html
archangel:
呵呵~您的眼睛真尖，虛線的確有啦，因為美工的圖檔沒切好。
http://xspo.zinfu.com/images/left_bar0_12.gif
至於 Firefox 瀏覽的確有問題，在 a 標籤加一個
display:block 就正常了。不過因為範例是左右二排按鈕的關係，在 TD 裡面底圖在 hover 的時候會有顏色互斥的白線，後來在中間加一個有底色的 TD 擋掉就可以了。
也多謝你的提醒，等我有空再把 Firefox 這部份說明一下。
hlb:
感謝補充~~Orz
把圖放在一張，然後用 background-position 的方法之前我有試過。可能因為我的主機在國外，而且圖檔比較大一點，在 Firefox 瀏覽的速度正常，但是在 IE 上看速度就變的有點慢，大概是我試的方法不對吧…
我的做法是直接塞兩張圖進去，一張是正常顯示的，另一張則是隱藏的，詳細做法可以看這裡…
http://blog.php5.idv.tw/blog/tokimeki/modules.php?act=article&do=show&id=5
我偏好使用一個圖檔打死全部, 且如果這樣的需求還需要使用 JavaScript 的話就太小看 CSS 本身的能力了.
精簡在精簡, 簡單在簡單, 乾淨在乾淨, 是我追求的目標.
( 不用理我, 因為我已經玩到走火入魔去了. ccc )
記得還有一種是利用Java Script
利用 image = url(‘位址’);
如果沒記錯的話應該是這樣沒錯