如何設置圖像的按鈕和懸停效果的圖像

如何設置按鈕和懸停效果的圖像爲prev和下一個按鈕圖像，我不知道如何設置按鈕的圖像和懸停效果爲prev和下一個按鈕圖像.i需要圖像不透明度0.1也禁用圖像按鈕懸停，禁用條件和圖像不透明度0.5在啓用條件也懸停效果0.5。請幫幫我。見示例代碼：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"); 
     } 
    }); 
});

來源

2012-07-04 SANSCLAW

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.

來源

2012-07-04 19:38:30

也我需要禁用和啓用contition.button圖像完全禁用也懸停在禁用條件。 – SANSCLAW

檢查[this]（http://jsfiddle.net/YHXFp/44/），'jQuery'和'css'都進行了更改。 –

哇你的腳本非常nice.it工作完美。但如果我點擊下一個按鈕後禁用計數增加unlimited.why？看到：http：//jsfiddle.net/YHXFp/64/ – SANSCLAW

把圖像不AAS它會減慢網頁的加載一個好方法。 CSS比較好。這裏是CSS代碼和Working fiddle （我選擇了任意顏色，選擇你想要的顏色）。如果圖像只是將background-color替換爲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; 
}

來源

2012-07-04 19:30:09 xan

按鈕禁用條件不工作，這是主要的。 – SANSCLAW

如何設置圖像的按鈕和懸停效果的圖像

回答

相關問題