Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with changing background using javascript onClick

    Here is my script -- Applied in <head>

    Code:
    <script language="JavaScript">
    var bgImage = new Array(); // don't change this
    
    bgImage[0] = "images/aboutus_1.jpg";
    bgImage[1] = "images/1.jpg";
    bgImage[2] = "images/2.jpg";
    bgImage[3] = "";
    
    function changeBG(bgImage)
    {
         document.body.background = backImage[bgImage];
    }
    
    </script>
    And here is the code im using that is not working within <body>

    Code:
    <body>
    
         <div id="map"></div>
         <div id="bf_container" class="bf_container">
         <div id="bf_background" class="bf_background">
              <img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>
    
         <div class="bf_overlay"></div>
         <div id="bf_page_menu" class="bf_menu" >
              <h1 class="title">Fujiyama<span>Japanese</span></h1>
                   <ul>
                        <li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
                        <li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>
    this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1.

    Any help would be greatly appreciated.

    Thanks,

    Cross

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    You are using bgImage both as the name of an array and as a variable.

    Code:
    <script type = "text/javascript">
    var bgImage = []; 
    bgImage[0] = "images/aboutus_1.jpg";
    bgImage[1] = "images/1.jpg";
    bgImage[2] = "images/2.jpg";
    bgImage[3] = "";
    
    function changeBG(x){
    document.body.background = bgImage[x];
    }
    </script>
    onClick="javascript:changeBG(1)" // javascript: is redundant - delete

    “A gentleman is one who never hurts anyone's feelings unintentionally.” - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)
    Last edited by Philip M; 08-31-2011 at 05:34 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •