switch background image

[turpentyne]

I have a "read more" toggle button on my page that uses this basic script - I want it to also change the background image listed in the stylesheet, but it doesn't work. Any thoughts?

 

<script type="text/javascript">


function showme(id, linkid) {
        var divid = document.getElementById(id);
        var toggleLink = document.getElementById(linkid);
        if (divid.style.display == 'block') {
            toggleLink.innerHTML = '<img src="images/readmore.png">';
            divid.style.display = 'none';
		document.container_homepage.style.backgroundImage="url('http://www.workshopsaz.org/images/bgx.jpg')";

        }
        else {
            toggleLink.innerHTML = '<img src="images/readless.png">';
            divid.style.display = 'block';
		document.container_homepage.style.backgroundImage="url('http://www.workshopsaz.org/images/bgx2.jpg')";
        }
    }
</script>

[haku]

To make your script more lighweight, you can use the same element, but define two different css classes/ids, and switch those. For example:

 

HTML:

<div id="background-div" class="normal"></div>

 

CSS:

.normal
{
  background-image:url(/images/background-image1.jpg);
}

.readmore
{
  background-image:url(/images/background-image2.jpg);
}

 

Then you switch the class with javascript:

document.getElementById("some_anchor_link").onclick = function()
{
  document.getElementById("background-div").setAttribute("class", "readmore");
}