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
Discussão (5)
Carregando comentários...