In this example, we learn how to change the color( background or fore color) on
the mouse over event with the help of JavaScript.
![JScriButt1.gif]()
After the call of JavaScript function
![JScriButt2.gif]()
Step 1: First we take a Button control (btnchangecolor) . We set the
color (BackGround and ForeColor) as per our requirement
<input
type="button"
id="btnchangecolor"
value="Button"
onmouseover="ChangeColor()"
onmouseout="HideColor()
style="background-color:
#FFFFFF" />
There are two JavaScript Functions in it.
- ChangeColor(): For Change the Color on the
onmouseover event
- HideColor(): Sets the Default Color.
Step 2: Now we write the JavaScript Functions:
<script
language="JavaScript"
type="text/javascript"
>
function
ChangeColor() {
document.getElementById('btnchangecolor').style.backgroundColor
= "Pink";
document.getElementById('btnchangecolor').style.color
= "White";
setTimeout("Change2()", 1000);
}
</script>
Here we set the Background and Fore Color of the button. Here we call another
function Change2(). This function is used to change the color of the button
again.
Note: Here we call setTimeout function, it helps us to call the function(
Change2() ) after 1 millisecond (1000).
![JScriButt3.gif]()
Now we write the function Change2()
function
Change2() {
document.getElementById('btnchangecolor').style.backgroundColor
= "Purple";
document.getElementById('btnchangecolor').style.color
= "White";
setTimeout("Change3()", 1000);
}
Here it sets the color again, now again we call another function Change3() which
sets the new color after 1 milliseconds
![JScriButt4.gif]()
Now we write the function Change3()
function
Change3() {
document.getElementById('btnchangecolor').style.backgroundColor
= "Red";
document.getElementById('btnchangecolor').style.color
= "Black";
}
Step 3: Now we call the HideColor() function on the onmouseout event. It
sets the default color of the button.
function
HideColor() {
document.getElementById('btnchangecolor').style.backgroundColor
= "White";
document.getElementById('btnchangecolor').style.color
= "Black";
}
Complete Program:
<head
runat="server">
<title></title>
<script
language="JavaScript"
type="text/javascript"
>
function ChangeColor() {
document.getElementById('btnchangecolor').style.backgroundColor
= "Pink";
document.getElementById('btnchangecolor').style.color
= "White";
setTimeout("Change2()", 1000);
}
function Change2() {
document.getElementById('btnchangecolor').style.backgroundColor
= "Purple";
document.getElementById('btnchangecolor').style.color
= "White";
setTimeout("Change3()", 1000);
}
function Change3() {
document.getElementById('btnchangecolor').style.backgroundColor
= "Red";
document.getElementById('btnchangecolor').style.color
= "Black";
}
function HideColor() {
document.getElementById('btnchangecolor').style.backgroundColor
= "White";
document.getElementById('btnchangecolor').style.color
= "Black";
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<input
type="button"
id="btnchangecolor"
value="Button"
onmouseover="ChangeColor()"
onmouseout="HideColor()"
style="background-color:
#FFFFFF" />
</div>
</form>
</body>