Javascript Swap Images Rollover

I have the following CSS where an image 'vote_up' is a background image. I'd like to alter the javascript to swap images on rollover.

The JS code below makes a call to database. Is there a way to call a mouseover function with background images? If not can you provide another solution?

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>

Possibly Use Something Like This? There is no image name attribute defined in the CSS. Is there a way to call that out?

<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开发者_StackOverflow社区.png')">Vote Up!</a>

You should use CSS:

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

This even works in IE6!

If you're just looking to do the rollover effect, then I'd would strongly recommend using a sprite and the :hover pseudo element.

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

Make your sprite two images (the non-rolled over and the rolled over one) side by side, above and below each other. Each one (in this case) would be 30 px. Piece of cake.

To change the background image of an element el in jQuery, you can do something like:

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