CODEWITHSUNDEEP
c#javascriptasp.netcss
Mark
Mark

Reputation: 2760

How to change image when cursor hover over the image in asp.net website

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

Upvotes: 1

Views: 15830

Answers (5)

Hiren Visavadiya
Hiren Visavadiya

Reputation: 485

Add following lines at page_load event in your code page.

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

Upvotes: 0

huMpty duMpty
huMpty duMpty

Reputation: 14460

<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;
}

if you can make a one image with using both images, it will be more easier.

enter image description here

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

To change image in click event, you can add this on your buttonclick

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

and in your css

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

Upvotes: 8

Rohan Patil
Rohan Patil

Reputation: 2348

Try this

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

Upvotes: 3

Pedryk
Pedryk

Reputation: 1663

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

Upvotes: 1

aF.
aF.

Reputation: 66697

Use javascript on mouse over event.

See it here!

Upvotes: 2

Related Questions