ok. i'm trying to make a header that can be changed by the clicking of a button. so i made this code to try and achieve that. for some reason it doesn't work. i'm not particularly skilled at javascript so i can't spot any errors that might be obvious to other people.


HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site</title>
<script>
var backImage = new Array();
backImage[0] = "background: url(img/headero.gif)";
backImage[1] = "background: url(img/headerb.gif)";
backImage[2] = "background: url(img/headerg.gif)";
function changeBGImage(whichImage){
if (document.body.getElementById('headerbar').style = "background: url(img/headerg.gif)"){
document.body.getElementById('headerbar').style = backImage[whichImage];
}
}
</script>
<style>
body {
margin: 0;
background: url(img/newbg.png);
}
#headerbar {
width: 879px;
height: 52px;
float: left;
margin-top: 20px;
}
.hbpadding {
padding-left: 700px;
padding-top: 13px
}
.hbbuttonspacer {
width: 5px;
}
</style>
</head>
<body>
<div id="headerbar" style="background: url(img/headerg.gif)">
	<div class="hbpadding">
		<a href="#" onclick="changeBGImage(0)"><img id="obutton" src="img/obutton_off.gif" border="0" /></a>
		<a href="#" onclick="changeBGImage(2)"><img id="bbutton" src="img/bbutton_off.gif" border="0" /></a>
		<a href="#" onclick="changeBGImage(1)"><img id="gbutton" src="img/gbutton_off.gif" border="0" /></a>
	</div>
</div>
</body>
</html>