Web Analytics Made Easy -
StatCounter Problem with changing background using javascript onClick - CodingForum

Announcement

Collapse
No announcement yet.

Problem with changing background using javascript onClick

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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; Aug 31, 2011, 01: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.

    Comment

    Working...
    X