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

【问题标题】：How to change image when cursor hover over the image in asp.net website当光标悬停在asp.net网站中的图像上时如何更改图像
【发布时间】：2011-11-17 10:07:39
【问题描述】：

<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)

【问题讨论】：

感谢您的回答，点击图片时我该怎么做

标签： c# javascript asp.net css

【解决方案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;}

【讨论】：

+1 表示简单且最好的方法。最好的方法是使用 1 张同时包含默认和悬停状态的图像（图像拼接）。这意味着当用户将鼠标悬停在图像上时没有额外的图像加载。对于这样的事情，使用 Javascript 是一种非常古老且过时的方法，当用户将鼠标悬停在按钮上时将会有额外的图像加载，除非您随后添加额外的 javascript 来预加载图像。
感谢您的回答，点击图片时我该怎么做

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

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

看here！

【讨论】：

这是一种叫做 css 的东西，如果禁用 javascript 的浏览器会发生什么？
当简单的 html/css 是最好的方法时，建议使用 javascript 选项。

【解决方案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'"/>

【讨论】：

【解决方案5】：

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

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

【讨论】：