By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,453 Members | 937 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,453 IT Pros & Developers. It's quick & easy.

how to change the background images with fade

P: 4

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.


how can I "merge" between the function that's changing the images and the function that in charge of the fade.
Expand|Select|Wrap|Line Numbers
  2.     <html>
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  6.     <title>none</title>
  7.     <link rel="stylesheet" type="text/css" href="Css/design.css" >
  8.      <script src="query-1.4.4.js" type="text/javascript"></script> 
  9.     <script type="text/javascript">
  10.     $(document).ready(function() 
  11.     {
  12.         $(document).ready(function() ({$('').fadeIn(1000);    
  13.     });
  14.     </script>
  15.     <script language="JavaScript">
  16.     function changeBg (color) {
  17.       document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
  18.     </script>
  19.     </head>
  20.     <body>
  21.     <div id="wrapper" class="wrapper">
  22.          <div class="logo"><a href=""><img border="0" src="Images/logo.png" ></a>
  23.          </div>
  24.             <div class="menu">
  25.                 <a href="#" id="arrowleft"><img border="0" src="Images/arrowleft.png" ></a>
  26.                 <img border="0" src="Images/black.png" onclick="changeBg(;" name="black">
  27.                 <img border="0" src="Images/blue.png" onclick="changeBg(;" name="blue">
  28.                 <img border="0" src="Images/fuksia.png" onclick="changeBg(;" name="fuksia">
  29.                 <img border="0" src="Images/brown.png" onclick="changeBg(;" name="brown">
  30.                 <img border="0" src="Images/orange.png" onclick="changeBg(;" name="orange">
  31.                 <img border="0" src="Images/red.png" onclick="changeBg(;" name="red">
  32.                 <img border="0" src="Images/grey.png" onclick="changeBg(;" name="grey">
  33.                 <img border="0" src="Images/white.png" onclick="changeBg(;" name="white">
  34.                 <a href="#" id="arrowright"><img border="0" src="Images/arrowright.png" ></a>
  35.     </div>
  36.     </body>
  37.     </html>
Nov 14 '11 #1
Share this Question
Share on Google+
3 Replies

P: 4
this is my code,I want the change of the background image,which I bulid a 'ChangeBg' function for,to be fade,so I add the fadein() varible.

why this is not working? what am I doing wrong?

Expand|Select|Wrap|Line Numbers
  1.  <script src=""type="text/javascript"></script> 
  2.  <script language="JavaScript"> 
  3.  function changeBg (color) { 
  4.   document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-  repeat"; 
  5.   $("changeBg").fadeIn("slow"); } 
  6.   </script> 
Nov 15 '11 #2

Expert 100+
P: 431
Since you already imported jQuery and by the look of things want to use some sort of JavaScript to assign background to your #wrapper why don't you use jQuery to do so:

Expand|Select|Wrap|Line Numbers
  1. $('#wrapper').css({backgroundImage : "url(1.JPG)"});
Than when you want to change backgrounds just fade out background image and use callback function to change backgrounds url and fade back in. something like this:

Expand|Select|Wrap|Line Numbers
  1. $('#wrapper').fadeOut(1000, function(){
  2.     $(this).css({backgroundImage : "url(2.JPG)"});
  3.     $(this).fadeIn(1000);
  4. });
Nov 17 '11 #3

P: 20
I'll give you one tip about your code, try not to mix Javascript with HTML. It makes a mess. separate things.
Nov 17 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.