In this example, we learn how to change the color( background or fore color) on
the mouse over event with the help of JavaScript.
After the call of JavaScript function
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).
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
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>