¿Cambiar la imagen en el vuelo estacionario usando asp: imagebutton y CSS?

Question

tengo el siguiente código pero no se parece a trabajar:

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

y una clase CSS para cambiar la imagen en vuelo estacionario:

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

por favor avise. Gracias

Answer 1

Un ImageButton controles se renderiza como un elemento <input type="image" /> con el ImageUrl propiedad de convertirse en el src atributo como:

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

Por lo tanto usted está solicitando una imagen de fondo a esta, que no se puede ver como la imagen src es siendo superpuesto en la parte superior.

usted tiene 2 opciones:

---

1) Cambie el ImageButton utilizar una imagen de fondo:

.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'); 
} 

Si va a utilizar este método, sin embargo, que lo haría recomendamos usar un <asp:Button /> en su lugar. Parece inútil usar un <asp:ImageButton /> si ni siquiera está haciendo uso del atributo src.

---

2) Usar jQuery para cambiar la imagen en vuelo estacionario:

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

A tener en cuenta que esto sólo funcionará con javascript activado, y debe incluir la librería jQuery.

Answer 2

La propiedad ImageUrl no es lo mismo que establecer la imagen de fondo. Elimine CSS y configure las propiedades onmouseout y onmouseover en su página.

Answer 3

prefiero de esta manera:

<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'"/> 

bye