Görüntüyü değiştir asp kullanarak: ımagebutton ve CSS?

Question

Aşağıdaki kod var ama çalışmak için görünmüyor:

<td align="center" style="padding-bottom:52.5px"> 
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server"  ImageUrl="/_layouts/Right_GrayArrow.png"/> 
</td> 

Ve CSS sınıf vurgulu görüntüyü değiştirmek için:

.RightArrow:hover 
{ 
background-image: url('/_Layouts/Right_GreenArrow.png') !important; 
} 

bildiriniz. Teşekkür

Answer 1

bir ImageButton kontrolleri olma ImageUrl özelliğe sahip bir <input type="image" /> unsuru olarak vermektedir src nitelik gibi: Dolayısıyla

<input type="image" src="/_layouts/Right_GrayArrow.png" /> 

Eğer src görüntü olduğu gibi göremiyorum, hangi bu arka plan resmi başvurduğunuz Üstüne yerleştiriliyor. İsterdim, gerçi bu yöntemi kullanmak için kullanacaksanız

.RightArrow 
{ 
    width: /* width of image */ 
    height: /* height of image */ 
    background-image:url('/_layouts/Right_GrayArrow.png'); 
} 
.RightArrow:hover 
{ 
    background-image: url('/_Layouts/Right_GreenArrow.png'); 
} 

:

---

1) bir arka plan görüntüsü kullanmak ImageButton değiştirin:

Sen 2 seçenek var Bunun yerine bir <asp:Button /> kullanılması önerilir. Bu bile src öznitelik yararlanarak değilseniz bir <asp:ImageButton /> kullanılarak anlamsız görünüyor.

---

2) vurgulu görüntüyü değiştirmek için jQuery kullanın:

$(".RightArrow").hover(function(){ 
    $(this).attr("src", "/_Layouts/Right_GreenArrow.png"); 
}, 
function(){ 
    $(this).attr("src", "/_Layouts/Right_GrayArrow.png"); 
}); 

sadece etkin javascript ile çalışacak ve jQuery kütüphanesini içermelidir bu kayda değer.

Answer 2

ImageUrl mülkiyet Arka plan resmi ayarı aynı değildir. CSS'yi kaldırın ve sayfanızdaki büyük ve en yüksek özellikleri ayarlayın.

Answer 3

bu şekilde tercih:

<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/> 

güle