因為 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;
..............
}

希望對大家有幫助，有問題再提出來討論囉。

使用圖型按鈕: (左邊靠下的 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('位址');
如果沒記錯的話應該是這樣沒錯