JQUERY-BANNER-FADEIN AND FADEOUT
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a Banner by using jquery </title>
<style>
*{
border:0px;
padding:0px;
margin:0px;
}
div#dynamic_banner figure img {
width:100%;
height:600px;
position:absolute;
}
div#dynamic_banner .buttons {
position:absolute;
z-index:1000;
top:550px;
left:0px;
width:100%;
}
div#dynamic_banner .buttons input[type=button]{
width:24%;
height:50px;
line-height:50px;
text-align:center;
background:rgba(255,255,255,0.5);
font-size:18px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="dynamic_banner">
<figure>
<img src="images/1.jpg" id="img_gp">
<img src="images/2.jpg" id="img_wp">
<img src="images/3.jpg" id="img_dm">
<img src="images/4.jpg" id="img_tg">
</figure>
<div class="buttons">
<input type="button" value="Graphic App" id="gp">
<input type="button" value="Web App" id="wp">
<input type="button" value="Digital Marketing" id="dm">
<input type="button" value="Tally+GST" id="tg">
</div>
</div>
<script>
$(document).ready(function() {
$("#img_gp").fadeIn("slow");
$("#img_wp,#img_dm,#img_tg").css("display","none");
$("#gp").click(function(){
$("#img_gp").fadeIn("slow");
$("#img_wp,#img_dm,#img_tg").css("display","none");
});
$("#wp").click(function(){
$("#img_wp").fadeIn("slow");
$("#img_gp,#img_dm,#img_tg").css("display","none");
});
$("#dm").click(function(){
$("#img_dm").fadeIn("slow");
$("#img_gp,#img_wp,#img_tg").css("display","none");
});
$("#tg").click(function(){
$("#img_tg").fadeIn("slow");
$("#img_gp,#img_wp,#img_dm").css("display","none");
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a Banner by using jquery </title>
<style>
*{
border:0px;
padding:0px;
margin:0px;
}
div#dynamic_banner figure img {
width:100%;
height:600px;
position:absolute;
}
div#dynamic_banner .buttons {
position:absolute;
z-index:1000;
top:550px;
left:0px;
width:100%;
}
div#dynamic_banner .buttons input[type=button]{
width:24%;
height:50px;
line-height:50px;
text-align:center;
background:rgba(255,255,255,0.5);
font-size:18px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="dynamic_banner">
<figure>
<img src="images/1.jpg" id="img_gp">
<img src="images/2.jpg" id="img_wp">
<img src="images/3.jpg" id="img_dm">
<img src="images/4.jpg" id="img_tg">
</figure>
<div class="buttons">
<input type="button" value="Graphic App" id="gp">
<input type="button" value="Web App" id="wp">
<input type="button" value="Digital Marketing" id="dm">
<input type="button" value="Tally+GST" id="tg">
</div>
</div>
<script>
$(document).ready(function() {
$("#img_gp").fadeIn("slow");
$("#img_wp,#img_dm,#img_tg").css("display","none");
$("#gp").click(function(){
$("#img_gp").fadeIn("slow");
$("#img_wp,#img_dm,#img_tg").css("display","none");
});
$("#wp").click(function(){
$("#img_wp").fadeIn("slow");
$("#img_gp,#img_dm,#img_tg").css("display","none");
});
$("#dm").click(function(){
$("#img_dm").fadeIn("slow");
$("#img_gp,#img_wp,#img_tg").css("display","none");
});
$("#tg").click(function(){
$("#img_tg").fadeIn("slow");
$("#img_gp,#img_wp,#img_dm").css("display","none");
});
});
</script>
</body>
</html>
Comments
Post a Comment