Wednesday, June 8, 2011

Live background Change using jQuery

6/08/2011

jQuery can be extremely useful for you if you want to beautify your web app. jQuery provide a number of simple ways to dynamically change the design of your web page. Here is a simple script that shows how to change the background image of your web page using jQuery.

Live Demo Download Script


HTML Markup:
<html>
<head>
<title>Webspeaks.in | Live background change with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="main">
 <div class="text"><a href="#">Live background change using jQuery <span class="small">by</span> <span class="title">Webspeaks.in</span></a></div>
 <div>
  <ul class="menu">
   <li><img src="1.gif" /></li>
   <li><img src="2.jpg" /></li>
   <li><img src="3.png" /></li>
   <li><img src="4.jpg" /></li>
   <li><img src="5.png" /></li>
   <li><img src="6.jpg" /></li>
  </ul>
 </div>
</div>
</body>
</html>

jQuery Code:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
 $('ul.menu').find('img').fadeTo('slow', 1);
 $('ul.menu').find('img').hover(function(){
  $(this).fadeTo('fast', 0.7);
  $('body').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
 }, function(){
  $(this).fadeTo('slow', 1);
 });
});
</script>

CSS Code:
body{background-color:#CCCCCC;}
#main{margin:0; position:absolute; width:100%; text-align:center;bottom:100px;}
ul.menu{list-style-type:none;}
ul.menu li{ display:inline;}
img{height:90px; width:105px; border:5px solid #333333; padding:2px;-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 cursor:pointer;
 margin:5px;
}
img:hover{border-color:#990099;}
.text a{background-color:#33CCCC; color:#FFFFFF; font-size:20px; font-weight:bold;
 font-family:Georgia, "Times New Roman", Times, serif; height:40px; line-height:40px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
 margin:10px;
 padding:10px;
 text-decoration:none;
}
.text .small{ font-size:16px;}
.text .title{ color:#993366;}

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

10 comments :

  1. What a wonderful information? I feel that, it is very simple but Before I didn't know this information.

    ReplyDelete
  2. beautifully explained

    ReplyDelete
  3. You have described it very well. Now a day, I feel that, No need to go to out because Internet showing me a more information to read. Today I have got a new information from your blog...

    ReplyDelete
  4. Thank you very much.....
    it was very helpful

    ReplyDelete
  5. Thanks, very helpful and awesome piece of jQuery :)

    ReplyDelete
  6. Thats really awesome and easy.
    Till date i have used javascript background change from chennai gsm to change the backgrounds :)
    thats bread and butter :)

    ReplyDelete
  7. thank you. This jquery method, always using..

    ReplyDelete
  8. Hey There. I found your blog using msn. This is an extremely well written article.
    I'll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will definitely comeback.
    Also visit my weblog ... zur seite

    ReplyDelete
  9. You actually make it seem so easy with your presentation
    but I find this matter to be actually something that I think I would never understand.
    It seems too complicated and extremely broad for me. I am looking forward for your
    next post, I'll try to get the hang of it!
    Here is my web blog ; hier klicken

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism