Mudar imagem com JavaScript

[Daniel_Martins 0]

Estou tentando criar um site onde o visitante escolhe a cor do site, queria usar JavaScript, o objetivo é ao clicar por exemplo no link 'Azul' o backgrund e os links mudarem para a corazul(exceto os links da barra de menu) e mudar a imagem da barra de menu.

 

Aqui está o código do menu:

 

HTML

 

<div id=linksbarramenu class=barramenu>
<ul id=imagens>
	<li><a href=http://pedreira.org><img src=Imagens/logo.jpg height=24	width=40></a></li>     
			</ul>
<div class=divisao></div>
	<ul id=linkbarramenu>
		<li>|</li>
		<li><a href=home_cinza.html>  Home   </a></li>
		<li>|</li>
		<li><a href=cadastro_cinza.html>   Cadastre-se   </a></li>
		<li>|</li>
		<li><a href=Login_cinza.html>   Login   </a></li>
		<li>|</li>
		<li><a href=FaleConosco_Cinza.html>   Fale Conosco   </a></li>
		<li>|</li>
	</ul>
</div>

 

CSS

 

.barramenu
{
background-image: url(Imagens/bg_barra_cinza.png);
position: fixed;
margin: 0auto;
top:0px;
left: 0px;
display: block;
width: 100%;
height: 45px;
}

#imagens, #linkbarramenu
{
float: left;
width: auto;
height: 45;
margin: auto;
padding-left: 10px;
display:block
}
#imagens li, #linkbarramenu li
{
display:inline;
list-style:none;
float:left;
margin:10px 20px
}
.divisao
{
float: left;
height:38px;
width:1px;
border-left:1px solid gray;
border-right:1px solid darkgray;
margin:3px 25px 3px auto;
}

#linksbarramenu ul li a
{
font-family: Comic Sans MS;
font-weight: bold;
text-decoration:none;
}

 

JavaScript

 

function BGAzul(lightblue){
document.bgColor = lightblue;
}

function BGVerde(lightgreen){
document.bgColor = lightgreen;
}

function BGLaranja(black){
document.bgColor = black;
}

function BGCinza(lightgray){
document.bgColor = lightgray;
}

 

Também estou com um problema em que as imagens estão passando por cima do menu.

 

Aqui os códigos das imagens

 

HTML

 

<img src=Imagens/Imagem_Esquerda1.jpg class=Imagens_Esquerda id=Imagem_Esquerda1>
<img src=Imagens/Imagem_Esquerda2.jpg class=Imagens_Esquerda id=Imagem_Esquerda2>
<img src=Imagens/Imagem_Esquerda3.jpg class=Imagens_Esquerda id=Imagem_Esquerda3>

 

CSS

 

.Imagens_Esquerda
{
width: 12%;
height: 19%;
}

#Imagem_Esquerda1
{
top: 460px;
left: 25px;
position:absolute;
cursor: pointer;
}

#Imagem_Esquerda2
{
top: 635px;
left: 25px;
position:absolute;
}

#Imagem_Esquerda3
{
top: 810px;
left: 25px;
position: absolute;
}

 

Quando eu tiro o 'position' a imagem passa normalmente por baixo do menu, mas colocando qualquer 'position' ela passa por cima. Já tentei 'absolute' 'relative' e 'static' e se eu deixo sem o position não consigo configurar as imagens.

Imagens do site:

 

 

 

Peço perdão pelo tópico ter ficado um pouco grande.

Agradeço desde já.

Abraços!

[Lucas Guima 164]

Com relação à mudança da cor do background, você falou, mostrou, mas não disse qual o problema.

 

A dúvida de CSS você leva pra área respectiva.

[Daniel_Martins 0]

Com relação à mudança da cor do background, você falou, mostrou, mas não disse qual o problema.

 

A dúvida de CSS você leva pra área respectiva.

 

Desculpe.

O problema é:

Ao clicar para mudar o background, eu queria que mudasse tambem a imagem de fundo do meu menu. Tentei de diversas formas, mas não obtive resultados.

 

Perdão por postar na area errada.

 

Abraços.