Question

I have a simple JS function changing the background image of my website for each "page" – there are actually no separate pages, just JS changing the content area and background. Here is the code I have:

var selector = 'home';

function changeBG() {
    if ( selector == 'portfolio' ) {
        document.bg_img.src = 'imgs/sandwiches/BLT_smlbw.jpg';
    }
    else if ( selector == 'contact' ) {
        document.bg_img.src = 'imgs/sandwiches/eggSammerSml.jpg';
    }
    else {
        document.bg_img.src = 'imgs/plums4.jpg';
    }
}

and the HTML

<!-- bg -->
<img class="bg" id="bg_img" src="" alt="background_image" name="background_image" />
<!-- /bg -->

<!-- content -->
<div id="wrapper">

<!-- left nav -->
<div id="left" class="content">
    <img src="imgs/sandwich_logo.png" width="384" height="73"     alt="sandwich_enthusiast" name="sandwich_enthusiast" />
    <ul class="nav">
        <li><a href="#about" id="about">about</a></li>
        <li><a href="#" id="portfolio" onclick="selector = 'portfolio'; changeBG();">portfolio</a></li>
        <li><a href="#contact" id="contact" onclick="selector = 'contact'; changeBG();">contact</a></li>
        <li><a href="http://glosee.ca/blog" id="blog">the sammers</a></li>
    </ul>
</div>
<!-- /left nav -->

In Chrome, Safari, and IE8 the image loads perfectly fine, but in FF the image loads as a background image in the wrapper div on the first click, then into the overall background on a second click.

Any ideas of how this can be fixed?

Answer 1

I’d recommend using a Javascript library like jQuery to help avoid cross-browser issues.

If you want to go ahead without one however, you could try using standard DOM manipulation methods:

document.getElementById('bg_img').setAttribute('src', 'imgs/sandwiches/BLT_smlbw.jpg')