onmouseover / onmouseout

[erickcouto 6]

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

[William Bruno 1501]

Não use javascript.

 

Dá para fazer apenas com CSS puro, utilizando o pseudo :hover

[erickcouto 6]

a entao eu consigo mudar uma imagem que esta localizada em algum ponto do layout como background de uma div, através do hover no css ???

 

po vou tentar então vlwww

[Claudio Corrêa 0]

desculpe, postei errado.

[erickcouto 6]

Esse esquema do CSS ta dificil viu ...

 

Lembrando que eu quero q mude o background de uma outra div fora do menu ...

 

 

Sera que no javascript nao e melhor ??? o codigo que postei la em cima nao esta certo ??? como devo usá-lo ?

 

 

vlw

[William Bruno 1501]

Com css vc precisaria usar o target. Mas o seu erro no código acima, é q vc não concatenou:

 

element.style.backgroundImage = "url("image")";

troque por

element.style.backgroundImage = "url(" + image + ")";

Para ver os erros, aperte Ctrl + Shift + J. Isso vai te ajudar a entender o js.