how to set image for buttons and hover effect for images

Question

How to set image for button and hover effect for prev and next button images? I do not know how to set image for button, and hover effect for prev and next button images. I need image opacity 0.1 also image button hover disabled,on disabled condition.and image opacity 0.5 on enabled condition also hover effect 0.5. Please help me. See example code: http://jsfiddle.net/YHXFp/50/

html

<div id="prevnexts">
    <button class="navButs" id="prevs">Prev</button>
    <button class="navButs" id="nexts">Next</button>
</div>

javascript

$(document).ready(function() {
    var cnt = 1;
    var maxLinkss = 5;
    $("#prevs").attr("disabled","disabled");
    $("#nexts").attr("enabled","enabled");   

    $(".navButs").click(function(){
        
        if (this.id=="nexts") {
            cnt++;  
            console.log(" + ",cnt);  
        } else {
            cnt--;
            console.log(" - ",cnt);  
        }
        
        if (cnt<0) cnt=0;
        
        if (cnt==maxLinkss-1) {
            $("#nexts").attr("disabled","disabled");
        } else {
            $("#nexts").removeAttr("disabled");
        }
        
        if (cnt==1) {
            $("#prevs").attr("disabled","disabled");
        } else {
            $("#prevs").removeAttr("disabled");
        }
    });  
}); 

Answer 1

Putting images is not a good way aas its slows down the loading of the web page. CSS is better. Here's the CSS code and the Working fiddle (I've chosen arbitrarily colors. Choose your desired colors ). In case of images just replace background-color with background-image:url(www.example.com/myimage.png) .

#prevs{
    background-color:#666;
    color:#000;
}
#prevs:hover{
    background-color:#004534;
}
#prevs:active{
    background-color:red;
}
#nexts{
    background-color:#999;
    color:#000;
}
#nexts:hover{
    background-color:#00fcbe;
}
#nexts:active{
    background-color:blue;
}

Answer 2

button#nexts{
    background:url(your_image_url) no-repeat;
    width:50px;
    height:50px;
    cursor:pointer;
}
button#prevs{
    background:url(your_image_url) no-repeat;
    width:50px;
    height:50px;
    cursor:pointer;
}

button#nexts:hover, button#prevs:hover{
    opacity:.5;
    filter:alpha(opacity=50);
}

DEMO.​