javascript 当光标悬停在asp.net网站中的图像上时如何更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8165331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change image when cursor hover over the image in asp.net website
提问by Mark
<asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png"
ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />
I have this button in my website, how can I change image when the user hover over the image or when the user clicks the image, I want to show the user the button is clicked. So I have created another image for send_message.png(1) which looks like clicked, so when user hover over of clicks the image I want to display send_message.png(2)
我的网站上有这个按钮，当用户将鼠标悬停在图像上或用户单击图像时，如何更改图像，我想向用户显示该按钮被单击。所以我为 send_message.png(1) 创建了另一个看起来像点击的图像，所以当用户悬停在点击图像上时，我想显示 send_message.png(2)
回答by huMpty duMpty
<asp:ImageButton ID="btn_Send" runat="server" CssClass="myButton"
ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />
CSS
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;
}
if you can make a one image with using both images, it will be more easier.
如果您可以使用两张图像制作一张图像，那会更容易。
.myButton{
background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent;
}
.myButton:hover{
background-position:bottom;
}
To change image in clickevent, you can add this on your buttonclick
要在click事件中更改图像，您可以将其添加到您的buttonclick
btn_Send.Attributes.Add("class", "some-class");
and in your css
并且在你的 css
.some-class{background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent !important;}
回答by Rohan Patil
Try this
试试这个
<asp:ImageButton id="ImageButton1" runat="server" ImageUrl="Images.gif"
OnMouseOver="src='Images/2.gif';"
OnMouseOut="src='Images/1.gif';">
</asp:ImageButton>
回答by Pedryk
Try this:
试试这个：
<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'"/>
回答by Hiren Visavadiya
Add following lines at page_load event in your code page.
在代码页中的 page_load 事件中添加以下行。
Image1.Attributes.Add("onmouseover", "this.src='originalPic.jpg'");
Image1.Attributes.Add("onmouseout", "this.src='newPic.jpg'");
