ASP.NET

Change backColor of Button When Mouse Move over it

Please support our ASP.NET advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Apr 2009

Posts: 33

Reputation: ritu verma is an unknown quantity at this point

Solved Threads: 1

ritu verma ritu verma is offline

Offline

Light Poster

Change backColor of Button When Mouse Move over it

Aug 27th, 2009

I have button in td, I want to change the backcolor of button when the mouse move over it ..

As we change the backcolor of td, when we moves move over it.Eg Below-

 Help with Code Tags 
 ASP.NET Syntax (Toggle Plain Text) 
 
   <td  onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900 style="width: 33px; height: 81px">
                                </td>
   <td  onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900 style="width: 33px; height: 81px">
                                </td>

•

Join Date: Jan 2008

Posts: 2,052

Reputation: serkan sendur is a glorious beacon of light

Solved Threads: 123

serkan sendur serkan sendur is offline

Offline

Postaholic

Re: Change backColor of Button When Mouse Move over it

Aug 27th, 2009

you can do that with javascript, post it to javascript forum. if your button is a server control then you need its clientID to change its background color. Or if you have a specific place for the button in the TD, you can access it using the html node tree, e.g. the childNodes of the TD node. I am sorry that i am too busy to provide the sample code now.

Due to lack of freedom of speech, i no longer post on this website.

•

Join Date: Aug 2009

Posts: 12

Reputation: Enthused is an unknown quantity at this point

Solved Threads: 1

Enthused

Offline

Newbie Poster

Re: Change backColor of Button When Mouse Move over it

Aug 27th, 2009

I know this could be done in CSS easily if your interested?

•

Join Date: Aug 2009

Posts: 19

Reputation: praveenkumarm is an unknown quantity at this point

Solved Threads: 2

praveenkumarm praveenkumarm is offline

Offline

Newbie Poster

Re: Change backColor of Button When Mouse Move over it

Aug 28th, 2009

Hi,
You can do it using javascript and css.
Try this code it might help.

<head runat="server">
<title>Untitled Page</title>
<style type="text/css" runat="server">
.cs
{
background-color:Window;
}
.cs1
{
background-color:ButtonFace;
}
</style>
<script type="text/javascript">
function mov()
{
var btnid= document.getElementById('btn1');
btnid.className='cs';
}
function mout()
{
var btnid= document.getElementById('btn1');
btnid.className='cs1';
}
</script>
</head>
<body>
<form id="form1" runat="server">

<input type="button" id="btn1" value="Change" onmouseover="mov()" onmouseout="mout()" runat="server" onserverclick="clk" />
</form>

•

Join Date: Apr 2009

Posts: 33

Reputation: ritu verma is an unknown quantity at this point

Solved Threads: 1

ritu verma ritu verma is offline

Offline

Light Poster

Re: Change backColor of Button When Mouse Move over it

Aug 28th, 2009

hi praveen your code work correctly,But its lengthy...But thx

Other Way of Doing it -

 Help with Code Tags 
 ASP.NET Syntax (Toggle Plain Text) 
protected void Page_Load(object sender, EventArgs e)
    {
        //Button1.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'");
        //Button1.Attributes.Add("onmouseout", "this.style.backgroundColor='green'");
 
 
OR
 
        //Button1.Attributes.Add("onmouseover", "this.style.backgroundColor='#009900'");
        //Button1.Attributes.Add("onmouseout", "this.style.backgroundColor='#000000'");
}
protected void Page_Load(object sender, EventArgs e)
    {
        //Button1.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'");
        //Button1.Attributes.Add("onmouseout", "this.style.backgroundColor='green'");


OR

        //Button1.Attributes.Add("onmouseover", "this.style.backgroundColor='#009900'");
        //Button1.Attributes.Add("onmouseout", "this.style.backgroundColor='#000000'");
}