Dynamic div color changing.

[liunx]

I have a javascript code I use to change the background image of a page when a thumbnail is clicked (not the ddrive one). I was wondering if there was any way to add to it so that when somebody clicks on the thumbnail it also changes the background-color of a certain div on the page. I can paste the jscript code if that would help. I'd prefer to do it in either javascript or pure css. Thanks for the help.You'll need javascript. For example:

<style type="text/css">
div#thediv {
width: 100px;
height: 100px;
background-image: #000 url("bar.gif");
}
</style>

...

<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:var thediv = document.getElementByID('thediv').style; thediv.backgroundColor='#ccc'; thediv.backgroundImage='foo.gif';">Change the background image</a>

...

<div id="thediv">Change my background image by clicking the link!</div>

PS: These forums have a habit of putting a space between "java" and "script" in the word javascript, so if there appears to be a space between there, omit it when you insert the code.Will that change the background image or the background color? I already have the script that changes the background image of the whole document, I just want to add to the code I already have the ability to change the background-color of a div at the same time the page background-image changes.I dont quite understand what you're getting at, but I've modified the above code to change the background color and image, and you should be able to work with it from there. If this isn't what you're looking for, post the code for the script you already have and describe what needs to be changed.Now that I think about it, instead of changing the background color of a div, I'd rather it change the background color of the entire page along with the background image.

Here is the code i already have:


<script language="JavaScript">

function changeBackground(strURL)
{
document.body.style.backgroundImage="url("+strURL+")"
}

</script>


<center>
Click a picture to change the background.
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic.jpg" onClick="changeBackground(this.href); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb.jpg" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic1.jpg" onClick="changeBackground(this.href); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb1.jpg" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic2.jpg" onClick="changeBackground(this.href); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb2.jpg" border="0"></a>
</center>



That only changes the background image, is there anything to add to it that will change the background image and the background color by clicking on the same thumbnail?Try this:<script language="JavaScript">

function changeBackground(strURL)
{
strURL = strURL.split("+");
document.body.style.backgroundColor="#"+strURL[1];
document.body.style.backgroundImage="url("+strURL[0]+")";
}

</script>


<center>
Click a picture to change the background.
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic.jpg+000000" onClick="changeBackground(this.href); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb.jpg" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic1.jpg+ffffff" onClick="changeBackground(this.href); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb1.jpg" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic2.jpg+cccccc" onClick="changeBackground(this.href); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb2.jpg" border="0"></a>
</center>
(the number after the '+' in the href's is the hexidecimal value for the color you want as the background color)But Dan, adding the + makes it inaccessible to non-javascript browsers, how about this:

<script type="text/javascript">

function changeBackground(strURL,bgcol)
{
 document.body.style.backgroundColor=bgcol;
 document.body.style.backgroundImage="url("+strURL+")";
}

</script>


<center>
Click a picture to change the background.
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic.jpg" onClick="changeBackground(this.href,'#000000'); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb.jpg" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic1.jpg" onClick="changeBackground(this.href,'#ffffff'); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb1.jpg" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"big_pic2.jpg" onClick="changeBackground(this.href,'#cccccc'); return false;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumb2.jpg" border="0"></a>
</center>Works perfectly, thank you very much.Originally posted by pixel8 
Works perfectly, thank you very much.  
If you used my way, you should probably switch to Sam's. I made mine that way so it would be easier to find where to change the values. But, I wasn't taking non-js browsers into consideration. Thanks for pointing that out, Sam :)