Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

erickcouto

onmouseover / onmouseout

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não use javascript.

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.