-->Following code copy in your notepad and save file name with extension .html
------------------------------------------------------------------------------------------------
<html>
<head>
<title>Hitesh Kaklotar</title>
<script>
function red()
{
document.bgColor="red";
}
function g()
{
document.bgColor="green";
}
function b()
{
document.bgColor="blue";
}
function red()
{
document.bgColor="red";
}
function s()
{
document.bgColor="silver";
}
function y()
{
document.bgColor="yellow";
}
function m()
{
document.bgColor="maroon";
}
function p()
{
document.bgColor="pink";
}
function bl()
{
document.bgColor="black";
}
function w()
{
document.bgColor="white";
}
</script>
<style type="text/css">
.box
{
width:700px;
padding:5px;
border:5px solid black;
margin:10px;
background-color:white;
}
body
{
//background-color:silver;
align:right;
font-style:bold;
}
h3
{
background-color:silver;
font-family:arial;
text-align:right;
width:700px;
font-size:15px;
}
a:hover
{
color:maroon;
background-color:gray;
font-family:verdana;
color:blue;
}
#red:hover
{
background:red;
}
#g:hover
{
background:green;
}
#b:hover
{
background:blue;
}
#s:hover
{
background:silver;
}
#y:hover
{
background:yellow;
}
#m:hover
{
background:maroon;
}
#p:hover
{
background:pink;
}
#bl:hover
{
background:black;
}
#w:hover
{
background:white;
}
</style>
</head>
<body>
<br><br>
<div class="box">
<h3>
<a href=" ">Home</a>    
<a href=" ">Services</a>    
<a href=" ">About US</a>    
<a href=" ">Contact US</a>    
</h3>
</div>
<br>
<input type="button" value=" RED " id="red" OnmouseOver="red()" ><br><br>
<input type="button" value=" GREEN " id="g" OnmouseOver="g()"><br><br>
<input type="button" value=" BLUE " id="b" OnmouseOver="b()"><br><br>
<input type="button" value=" SILVER " id="s" OnmouseOver="s()" ><br><br>
<input type="button" value=" YELLOW "id="y" OnmouseOver="y()" ><br><br>
<input type="button" value=" MAROON " id="m" OnmouseOver="m()" ><br><br>
<input type="button" value=" PINK " id="p" OnmouseOver="p()" ><br><br>
<input type="button" value=" BLACK " id="bl" Onclick="bl()"><br><br>
<input type="button" value=" WHITE " id="w" Onclick="w()" ><br><br>
<br>
</body>
</html>
--> then open this page in your browser , and move mouse pointer on button then display effect
(change background)
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
Javascript complete validation form : http://problemaspdotnet.blogspot.in/2014/02/javascript-basic-validation.html
------------------------------------------------------------------------------------------------
<html>
<head>
<title>Hitesh Kaklotar</title>
<script>
function red()
{
document.bgColor="red";
}
function g()
{
document.bgColor="green";
}
function b()
{
document.bgColor="blue";
}
function red()
{
document.bgColor="red";
}
function s()
{
document.bgColor="silver";
}
function y()
{
document.bgColor="yellow";
}
function m()
{
document.bgColor="maroon";
}
function p()
{
document.bgColor="pink";
}
function bl()
{
document.bgColor="black";
}
function w()
{
document.bgColor="white";
}
</script>
<style type="text/css">
.box
{
width:700px;
padding:5px;
border:5px solid black;
margin:10px;
background-color:white;
}
body
{
//background-color:silver;
align:right;
font-style:bold;
}
h3
{
background-color:silver;
font-family:arial;
text-align:right;
width:700px;
font-size:15px;
}
a:hover
{
color:maroon;
background-color:gray;
font-family:verdana;
color:blue;
}
#red:hover
{
background:red;
}
#g:hover
{
background:green;
}
#b:hover
{
background:blue;
}
#s:hover
{
background:silver;
}
#y:hover
{
background:yellow;
}
#m:hover
{
background:maroon;
}
#p:hover
{
background:pink;
}
#bl:hover
{
background:black;
}
#w:hover
{
background:white;
}
</style>
</head>
<body>
<br><br>
<div class="box">
<h3>
<a href=" ">Home</a>    
<a href=" ">Services</a>    
<a href=" ">About US</a>    
<a href=" ">Contact US</a>    
</h3>
</div>
<br>
<input type="button" value=" RED " id="red" OnmouseOver="red()" ><br><br>
<input type="button" value=" GREEN " id="g" OnmouseOver="g()"><br><br>
<input type="button" value=" BLUE " id="b" OnmouseOver="b()"><br><br>
<input type="button" value=" SILVER " id="s" OnmouseOver="s()" ><br><br>
<input type="button" value=" YELLOW "id="y" OnmouseOver="y()" ><br><br>
<input type="button" value=" MAROON " id="m" OnmouseOver="m()" ><br><br>
<input type="button" value=" PINK " id="p" OnmouseOver="p()" ><br><br>
<input type="button" value=" BLACK " id="bl" Onclick="bl()"><br><br>
<input type="button" value=" WHITE " id="w" Onclick="w()" ><br><br>
<br>
</body>
</html>
--> then open this page in your browser , and move mouse pointer on button then display effect
(change background)
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
Javascript complete validation form : http://problemaspdotnet.blogspot.in/2014/02/javascript-basic-validation.html
No comments:
Post a Comment