473,387 Members | 1,569 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to change the background images with fade

Join Bytes to post your question to a community of 473,387 software developers and data experts.

how to change the background images with fade

Hi,

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.

thanks.

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
  1.  
  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>
  38.  
Nov 14 '11 #1
3 5270
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> 
  7.  
Nov 15 '11 #2
zorgi
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

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

Similar topics

4
randomly change background image with css and javascript?
by: Nathan Given | last post by:
Hello All, I am trying to randomly change the background image of my home page but I can't seem to figure it out. Here is a snippet of my css .... BODY {background:transparent...
HTML / CSS
3
a:links background images and image links...
by: MediaDesign | last post by:
so there's the problem: my text links have background images and when I put links around images on my page, they too get the background image treatment which I do not...I have tried several...
HTML / CSS
3
css problem with background images
by: ribinha | last post by:
Hi all, I am having problems loading background images on my pages. I have created a css to display the images. It works just fine on my test box, but when I tried on real pages it wont upload any...
HTML / CSS
0
Dilemma with background images (putting borders on DIVs)
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different...
HTML / CSS
2
a novel way to change background images
by: windandwaves | last post by:
Hi Folk Have a look at this: http://wellstyled.com/css-nopreload-rollovers.html I really like this idea (using one background image and shifting its position on rollover) Let me know what...
HTML / CSS
1
Problem with displaying background images in Firefox table
by: simct | last post by:
As part of my learning, I wrote the following codes to display 2 background images side-by-side: <head> <style type="text/css"> .image1 {background-image: url(images/sw1.jpg); ...
HTML / CSS
6
capture ALL image urls used in document including background images
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to...
Javascript
1
background images
by: tlonthedl | last post by:
Hi, I am designing a theme for a wordpress blog and I am having some problems with repeating background images. Specifically, the background image will not show or repeat in the body, or in the...
HTML / CSS
3
AjAX, change background image in css dynamically
by: vartana | last post by:
I will be getting the background url dynamically using ajax and html. I have set an id=boxFooter_002 to my div and have ...
Javascript
7
KeredDrahcir
Two background images in IE 8
by: KeredDrahcir | last post by:
I need to give a division tow background images. I found tha it could give it two background images and it works in Firefox, Safri, Opera and Google Chrome but not in IE 8. I have found it works in...
HTML / CSS
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!