[CSS] 預載切換背景圖型的小技巧

因為 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 重複出現的情形.~

  • 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(‘位址’);
    如果沒記錯的話應該是這樣沒錯

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar