how to change a image on mouseover

Question

3.67/5 (3 votes)

See more:

hii
i have a imagebutton on my aspx page and i want to change this image on mouse over event. i m unable to find mouseover intelligence for asp:ImageButton.
how can i do this..
i have tried...

JavaScript

<script language="javascript" type="text/javascript">
       function mouseOverImage() {
           document.getElementById("ImageButton1").src = "images/orange-round-button-th.png";
       }

       function mouseOutImage() {
           document.getElementById("ImageButton1").src = "images/blue.png";
       }
   </script>

ASP.NET

<asp:ImageButton ID="ImageButton1" runat="server" Height="55px"              ImageUrl="~/images/blue.png"  onmouseover="mouseOverImage()"  onmouseout="mouseOutImage()" />

it works fine for html imagecontrol if i put id "img" in javascript

HTML

<img  id= "img" alt="image " Height="55px"  src="images/blue.png" onmouseover = "mouseOverImage()"  önmouseout="mouseOutImage()"/>

Posted 20-Sep-11 19:45pm

choudhary.sumit

Updated 20-Sep-11 19:50pm

v3

Add a Solution

Comments

Bhakta barik 21-Jul-12 7:30am

sfdfsd

Member 13475102 11-Dec-17 5:42am

how to work this program

5 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

shakil0304003 · Answer 1 · 2011-09-20T19:51:00

Solution 1

JavaScript

function mouseOverImage() {
            document.getElementById('<%= ImageButton1.ClientID %>').src = "images/orange-round-button-th.png";
        }
 
        function mouseOutImage() {
            document.getElementById('<%= ImageButton1.ClientID %>').src = "images/blue.png";
        }

Or you can use

ASP.NET

<asp:ImageButton ID="ImageButton1" runat="server" 
                 ImageUrl="~/images/blue.png"
                 onmouseover="this.src='images/orange-round-button-th.png';"
                 onmouseout="this.src='images/blue.png';"
                  />

Posted 20-Sep-11 19:51pm

shakil0304003

Updated 20-Sep-11 19:54pm

v2

Comments

choudhary.sumit 21-Sep-11 1:56am

dear
i got this error "The name 'ImageButton1' does not exist in the current context"
should i do some changes on imagebutton control source??

choudhary.sumit 21-Sep-11 2:00am

second one can now fire a shot!!
thanx alote

shakil0304003 21-Sep-11 2:41am

So, you can make my solution as answer :D

Member 8191039 16-Jul-12 13:16pm

onmouseover="this.src='images/orange-round-button-th.png';"
onmouseout="this.src='images/blue.png';"

So simple and it took me 2 days to find it!! Thank you

shakil0304003 27-Aug-12 2:44am

Welcome

koolprasad2003 · Answer 2 · 2011-09-20T19:53:00

aspx file

ASP.NET

<asp:imagebutton id="imgBtn1" runat="server" imageurl="~/images/1.gif" borderwidth="0" xmlns:asp="#unknown"></asp:imagebutton>

//onpage load assign them attributes.
.aspx.cs

C#

protected void Page_Load(object sender, EventArgs e)
{
imgBtn1.Attributes.Add("onmouseover", "this.src='images/3.gif'");
imgBtn1.Attributes.Add("onmouseout", "this.src='images/4.gif'");
}

Jikku James · Answer 3 · 2012-01-12T21:56:00

Solution 3

see this:Change image on mouse over

Posted 12-Jan-12 21:56pm

Jikku James

Rajesh Anuhya · Answer 4 · 2012-01-12T23:18:00

Solution 4

Image mouseover using CSS

http://www.w3schools.com/css/css_image_transparency.asp[^]

http://www.designmeme.com/tutorials/cssrollovers/[^]

Posted 12-Jan-12 23:18pm

Rajesh Anuhya

Member 8558411 · Answer 5 · 2012-06-28T03:18:00

Solution 5

VB

<asp:ImageButton runat="server" Style="cursor: pointer;" ID="btnOptA" border="0"
                                                               ImageUrl="~/images/optionA-btn.png" OnClick="btnOptA_Click" BorderStyle="None"
                                                               BorderColor="Transparent" onmouseout="this.src='images/optionA-btn.png'" onmouseover="this.src='images/optionA-btn_hover.png'" />

Posted 28-Jun-12 3:18am

Member 8558411

Comments

Tim Corey 28-Jun-12 9:36am

Why are you posting an answer on a 9-month-old question when the OP already got an answer (didn't mark it but told the person the solution worked)? Your answer isn't any different from that answer except you didn't explain anything.

how to change a image on mouseover

5 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0

Existing Members

...or Join us