<html>
<head>
<style>
body{
margin:0px 0px 0px 0px;
}
.header{
background-color:#006;
height:100%;
width:100%;
position:fixed;
}
.image,.image1{
background-image:url(earth.jpg);
height:150px;
width:150px;
border:#333 thin solid;
border-radius:100px;
margin-left:44%;
margin-top:-90px;
position:relative;
}
.image1{
margin-top:360px;
}
.imageleft{
background-image:url(earth.jpg);
height:200px;
width:200px;
border:#333 thin solid;
border-radius:100px;
margin-top:-450px;
float:left;
position:relative;
}
.imageright{
float:right;
margin-top:-450px;
background-image:url(earth.jpg);
height:200px;
width:200px;
border:#333 thin solid;
border-radius:100px;
position:relative;
}
#submmit{
margin-top:50px;
background-color:#F00;
border:#666 thin solid;
border-radius:50px;
padding:10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../jquery-classes/jquery.js"></script>
<script>
$(document).ready(function(){
var anim = $('.image'); var anim1 = $('.image1'); var anim2 = $('.imageleft'); var anim3 = $('.imageright');
anim.mouseenter(function(){
anim.animate({
top:'150px',
},2000);
anim.animate({
top:'0px',
},2000);
});
anim.mouseenter(function(){
anim1.animate({
top:'-180px',
},2000);
anim1.animate({
top:'0px',
},2000);
anim.mouseenter(function(){
anim2.animate({
right:'-420px',
},2000);
anim2.animate({
right:'0px',
},2000);
});
anim.mouseenter(function(){
anim3.animate({
right:'430px',
},2000);
anim3.animate({
right:'0px',
},2000);
});
});
});
</script>
</head>
<body>
<div class="header">
<input type="button" value="click here" id="submmit" />
<div class="image">
</div>
<div class="image1"></div>
<div class="imageleft"></div>
<div class="imageright"></div>
</div>
</body>
</html>
<head>
<style>
body{
margin:0px 0px 0px 0px;
}
.header{
background-color:#006;
height:100%;
width:100%;
position:fixed;
}
.image,.image1{
background-image:url(earth.jpg);
height:150px;
width:150px;
border:#333 thin solid;
border-radius:100px;
margin-left:44%;
margin-top:-90px;
position:relative;
}
.image1{
margin-top:360px;
}
.imageleft{
background-image:url(earth.jpg);
height:200px;
width:200px;
border:#333 thin solid;
border-radius:100px;
margin-top:-450px;
float:left;
position:relative;
}
.imageright{
float:right;
margin-top:-450px;
background-image:url(earth.jpg);
height:200px;
width:200px;
border:#333 thin solid;
border-radius:100px;
position:relative;
}
#submmit{
margin-top:50px;
background-color:#F00;
border:#666 thin solid;
border-radius:50px;
padding:10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../jquery-classes/jquery.js"></script>
<script>
$(document).ready(function(){
var anim = $('.image'); var anim1 = $('.image1'); var anim2 = $('.imageleft'); var anim3 = $('.imageright');
anim.mouseenter(function(){
anim.animate({
top:'150px',
},2000);
anim.animate({
top:'0px',
},2000);
});
anim.mouseenter(function(){
anim1.animate({
top:'-180px',
},2000);
anim1.animate({
top:'0px',
},2000);
anim.mouseenter(function(){
anim2.animate({
right:'-420px',
},2000);
anim2.animate({
right:'0px',
},2000);
});
anim.mouseenter(function(){
anim3.animate({
right:'430px',
},2000);
anim3.animate({
right:'0px',
},2000);
});
});
});
</script>
</head>
<body>
<div class="header">
<input type="button" value="click here" id="submmit" />
<div class="image">
</div>
<div class="image1"></div>
<div class="imageleft"></div>
<div class="imageright"></div>
</div>
</body>
</html>
