当光标悬停在asp.net网站上的图像时如何更改图像

Question

<asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png"
                                    ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />

我的网站上有这个按钮，当用户将鼠标悬停在图像上或用户点击图像时如何更改图像，我想向用户显示点击该按钮。所以我为send_message.png（1）创建了另一个看起来像点击的图像，所以当用户将鼠标悬停在点击图像上时我想显示send_message.png（2）

Answer 1

<asp:ImageButton ID="btn_Send" runat="server" CssClass="myButton"
                                    ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />

CSS

.myButton{
    background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent;
}
.myButton:hover{
    background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent;
}

如果你可以使用这两个图像制作一个图像，那将更容易。

.myButton{
    background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent;
}
.myButton:hover{
     background-position:bottom;
}

要更改click事件中的图片，您可以在buttonclick

上添加此图片

btn_Send.Attributes.Add("class", "some-class");

并在css

中

.some-class{background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent !important;}

Answer 2

试试这个

<asp:ImageButton id="ImageButton1" runat="server" ImageUrl="Images\1.gif"
OnMouseOver="src='Images/2.gif';"
OnMouseOut="src='Images/1.gif';">
</asp:ImageButton>

Answer 3

在鼠标悬停事件上使用javascript。

见here！

Answer 4

试试这个：

   <asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png"    ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" onmouseover="this.src='button2.jpg'" onmouseout="this.src='Styles/Images/send_message.png'"/>

Answer 5

在代码页中的page_load事件中添加以下行。

Image1.Attributes.Add("onmouseover", "this.src='originalPic.jpg'");
Image1.Attributes.Add("onmouseout", "this.src='newPic.jpg'");