468,527 Members | 2,070 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,527 developers. It's quick & easy.

how to change the background images with fade


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="http://mazonit.co.il/"><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(this.name);" name="black">
  27.                 <img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
  28.                 <img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
  29.                 <img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
  30.                 <img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
  31.                 <img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
  32.                 <img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
  33.                 <img border="0" src="Images/white.png" onclick="changeBg(this.name);" 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
3 4991
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="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"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
431 Expert 256MB
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
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.

Similar topics

3 posts views Thread by MediaDesign | last post: by
3 posts views Thread by ribinha | last post: by
2 posts views Thread by windandwaves | last post: by
1 post views Thread by tlonthedl | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.