View Full Version : Problem with changing background using javascript onClick

08-31-2011, 05:58 PM
Here is my script -- Applied in <head>

<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];


And here is the code im using that is not working within <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>
<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.



Philip M
08-31-2011, 06:32 PM
You are using bgImage both as the name of an array and as a variable. :(

<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];

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)