how to set image for buttons and hover effect for …

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

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.

how to set image for buttons and hover effect for images

Advertisement

Answer