onmouseover / onmouseout

Pessoal quero que a imagem mude quando eu passar o mouse em cima do link do menu tenho os seguintes codigos mas nao consigo enter muito a logica e fazer funcionar.

Menu

<nav class="menu">
<ul>
	<li onmouseover="mudaFoto('img/lego.png', 'banner)" onmouseout="mudaFoto('img/lego.png', 'banner')" ><a href="index.html">HOME</a></li>
	<li onmouseover="mudaFoto('img/sobre.png', 'banner')" onmouseout="mudaFoto('img/lego.png', 'banner')" ><a href="sobre.html">SOBRE</a></li>
	<li onmouseover="mudaFoto('img/produtos.png', 'banner')" onmouseout="mudaFoto('img/lego.png', 'banner')" ><a href="produtos.html">PRODUTOS</a></li>
	<li onmouseover="mudaFoto('img/servicos.png', 'banner')" onmouseout="mudaFoto('img/lego.png', 'banner')" ><a href="servicos.html">SERVIÇOS</a></li>
	<li onmouseover="mudaFoto('img/contato.png', 'banner')" onmouseout="mudaFoto('img/lego.png', 'banner')" ><a href="contato.html">CONTATO</a></li>
</ul>
</nav>

Div que eu quero mudar o background:

 <div id="banner">
 <div class="legenda">
 <h1>QUALIDADE</h1>
 <p>Nossas resinas contam com garantia de procedência, mantemos nosso padrão de qualidade e contamos com suporte laboratorial a fim de auxiliar nossos clientes na escolha correta da matéria-prima.</p>
 </div>
 </div>

CSS da div acima:

#banner {
	background: url(../img/lego.jpg) no-repeat;
	height: 300px;
 margin-bottom: 4em;
 position: relative;
 clear: both;
 border-radius: 1em;
 border: 1px solid #ccc;
}

e o JS que eu nao to sabendo usar, não sei direito aonde colocar as infos dentro dele:

function mudaFoto (image, id) {
	var element = document.getElementById(id);
	element.style.backgroundImage = "url("image")";
}

Lembrando que to linkando o js no meu HTML...

Aonde devo colocar as infos dentro desse JS ?

Abrass