Javascript Swap Images Rollover

Question

我有以下CSS，其中圖像'vote_up'是背景圖像。我想改變JavaScript在翻轉時交換圖像。

下面的JS代碼調用數據庫。有沒有辦法用背景圖片調用鼠標懸停功能？如果不是，你能提供另一種解決方案

CSS

<style type='text/css'> 
body { 
    background: #e8e6de; 
} 

a { 
outline:none; 
} 

.entry { 
    width: 710px; 
    background: #ffffff; 
    padding:8px; 
    border:1px solid #bbbbbb; 
    margin:5px auto; 
    -moz-border-radius:8px; 
} 

span.link a { 
    font-size:150%; 
    color: #000000; 
    text-decoration:none; 
} 

a.vote_up, a.vote_down { 
    display:inline-block; 
    background-repeat:none; 
    background-position:center; 
    height:16px; 
    width:16px; 
    margin-left:4px; 
    text-indent:-900%; 
} 

a.vote_up { 
    background:url("images/thumb_up.png"); 
} 

a.vote_down { 
    background:url("images/thumb_down.png"); 
} 
</style> 

的Javascript

<script type='text/javascript'> 
$(function(){ 
    $("a.vote_up").click(function(){ 

    <!-- Required click function omitted for this example--> 
    } 

}); 
</script> 

可能使用這樣的？ 在CSS中沒有定義圖像名稱屬性。有沒有辦法調出來？

<script type="text/javascript"> 
<!-- 

function roll(img_name, img_src) 
{ 
    document[img_name].src = img_src; 
} 

//--> 

</script> 

HTML

<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>' onmouseover="roll('vote_up', 'images/thumb_up_green.png')" onmouseout="roll('vote_up', 'images/thumb_up.png')">Vote Up!</a> 

Answer 1

你應該使用CSS：

a.vote_up:hover { 
    background: url(...); 
} 

這甚至適用於IE6！

Answer 2

更改元素el的背景圖片在jQuery中，你可以這樣做：

el.css("background-image", "new_bg.png"); 

Answer 3

如果你只是想要做翻轉效果，那麼我會強烈建議使用一個精靈和：hover僞元素。

.vote_button { background-position:left top; background-image: url('http://yoursite.com/images/your_vote_button_sprite.jpg'); width: 30px; height: 30px; } 
.vote_button:hover { background-position:left bottom; } 

使你的精靈兩個圖像（非翻轉和翻轉一個）並排，在彼此的上方和下方。每一個（在這種情況下）將是30像素。小菜一碟。