Javascript Swap Images Rollover

Question

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.png')">Vote Up!</a>

Answer 1

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

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

Answer 2

You should use CSS:

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

This even works in IE6!

Answer 3

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.