Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript
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...
 <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: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
<img  id= "img" alt="image " Height="55px"  src="images/blue.png" onmouseover = "mouseOverImage()"  önmouseout="mouseOutImage()"/> 
Posted 20-Sep-11 20:45pm
Edited 20-Sep-11 20:50pm
v3
Comments
Bhakta barik at 21-Jul-12 7:30am
   
sfdfsd
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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:ImageButton ID="ImageButton1" runat="server" 
                 ImageUrl="~/images/blue.png"
                 onmouseover="this.src='images/orange-round-button-th.png';"
                 onmouseout="this.src='images/blue.png';"
                  />
  Permalink  
v2
Comments
Indiana.Net at 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??
Indiana.Net at 21-Sep-11 2:00am
   
second one can now fire a shot!!
thanx alote
shakil0304003 at 21-Sep-11 2:41am
   
So, you can make my solution as answer :D
Member 8191039 at 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 at 27-Aug-12 2:44am
   
Welcome
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

aspx file
<asp:imagebutton id="imgBtn1" runat="server" imageurl="~/images/1.gif" borderwidth="0" xmlns:asp="#unknown"></asp:imagebutton>
 
//onpage load assign them attributes.
.aspx.cs
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'");
}
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

<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'" />
  Permalink  
Comments
Tim Corey at 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.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

  Permalink  

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

  Print Answers RSS
0 OriginalGriff 6,055
1 DamithSL 4,621
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,500
4 Sergey Alexandrovich Kryukov 3,294


Advertise | Privacy | Mobile
Web02 | 2.8.141220.1 | Last Updated 22 Apr 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100