проблема с JS и Firefox - замена изображения

Question

У меня есть простая функция JS, меняющая фоновое изображение моего веб-сайта для каждой «страницы» - на самом деле нет отдельных страниц, просто JS меняет область содержимого и фон. Вот код, который у меня есть:

    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';
        }


    }

и HTML

</p>

<pre><code><!-- 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>

В Chrome, Safari и IE8 изображение загружается идеально, но в FF изображение загружается как фоновое изображение в div-оболочке при первом щелчке, а затем в общий фон при втором щелчке.

Есть идеи, как это можно исправить?

Спасибо

Answer 1

Я бы рекомендовал использовать библиотеку Javascript, такую ​​как jQuery , чтобы избежать кросс-браузерных проблем.

Если вы хотите пойти дальше без него, вы можете попробовать использовать стандартные методы манипуляции DOM:

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

Answer 2

Просто используйте что-то вроде этого:

function changeBG()
{
    var img = docuemnt.getElementById ("bg_img");
    if( selector == 'portfolio' )
    {
            img.src = 'imgs/sandwiches/BLT_smlbw.jpg';
    }

    else if( selector == 'contact' )
    {
            img.src = 'imgs/sandwiches/eggSammerSml.jpg';
    }
    else
    {
            img.src = 'imgs/plums4.jpg';
    }


}

Answer 3

Сценарий в порядке. Это может иметь отношение к классу bg, назначенному для изображения bg_img. Возможно, bg имеет некоторый неподдерживаемый атрибут, который не работает с FF.

EDIT:

Чтобы изменить фон своей страницы, почему бы вам просто не заменить document.bg_img.src на document.body.background.