Hello friends..
First of all HAPPY NEW YEAR to all of you.this is my first post in 2014.
This year my target is to learn CSS,JAVASCRIPT & PHP and I have already started it.Using CSS and
JAVASCRIPT in HTML we can make our page very attractive.
In this post i'll explain the animation in html that is"How to change the background color only by clicked the button".
HTML CODE
<html>
<head>
<title>animation</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript">
function changeBG(el,clr)
{
var elem=document.getElementById(el);
elem.style.transition="background 2.0s";
elem.style.background=clr;
}
</script>
</head>
<body>
<h3>CLICK ON ANY BUTTON</h3>
<form id="form">
input type="button" value="megenta" onClick="changeBG('box','#F0F')"/>
<input type="button" value="green" onClick="changeBG('box','#0c0')"/>
<input type="button" value="black" onClick="changeBG('box','#000')"/>
</form>
<div id="box"><h1>Hello i am Sanjay Singh</h1></div>
</body>
</html>
CSS CODE
#box
{
background:#36C;
width:640px;
height:480px;
}
h1
{
color:#FF0;
padding-top:180px;
padding-left:150px;
}
h3
{
color:#009;
padding-left:150px;
}
#form
{
padding-left:150px;
}
animation
First of all HAPPY NEW YEAR to all of you.this is my first post in 2014.
This year my target is to learn CSS,JAVASCRIPT & PHP and I have already started it.Using CSS and
JAVASCRIPT in HTML we can make our page very attractive.
In this post i'll explain the animation in html that is"How to change the background color only by clicked the button".
HTML CODE
<html>
<head>
<title>animation</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript">
function changeBG(el,clr)
{
var elem=document.getElementById(el);
elem.style.transition="background 2.0s";
elem.style.background=clr;
}
</script>
</head>
<body>
<h3>CLICK ON ANY BUTTON</h3>
<form id="form">
input type="button" value="megenta" onClick="changeBG('box','#F0F')"/>
<input type="button" value="green" onClick="changeBG('box','#0c0')"/>
<input type="button" value="black" onClick="changeBG('box','#000')"/>
</form>
<div id="box"><h1>Hello i am Sanjay Singh</h1></div>
</body>
</html>
CSS CODE
#box
{
background:#36C;
width:640px;
height:480px;
}
h1
{
color:#FF0;
padding-top:180px;
padding-left:150px;
}
h3
{
color:#009;
padding-left:150px;
}
#form
{
padding-left:150px;
}
No comments:
Post a Comment