Exibir uma imagem quando passar o mouse por cima de um link

Assuntos Gerais
#1

aew pessoal tava vendo nesse site aqui…
http://codecanyon.net/page/top_sellers
quando agente passa o mouse encima de um dos produtos exibe uma imagem do produto…

alguem sabe qual o nome da função ou como fazer??

#2

senaum me engano eh JS, mas deve ter outro coisa tb…

#3

Pelo que vi nesse caso ai ele ta usando Css.
usandoo o :hover.
da uma pesquisada sobre isto e voce vera que nao é tao dificil.
abs

#4

Cara, você pode usar CSS com JavaScript, como já foi dito. Escrevi um código bem simples, da uma olhada:

<html>

<script language="JavaScript">
		function mostrarElemento(id, visibilidade) {
			document.getElementById(id).style.display = visibilidade;
		}
	</script>
<!-- fim do js -->

<style type="text/css">
#prodImagem {
	width: 200px;
	height: 150px;
	background-color: black;
	display: none;
	position: absolute;
	color: white;
	padding: 5px;
}
</style>
<!-- fim do css -->

<body>
	<a href="#" onMouseOver="mostrarElemento('prodImagem', 'inline');"
		onMouseOut="mostrarElemento('prodImagem', 'none');">Produto
		001</a>

	<div id="prodImagem">Imagem do produto</div>
</body>
<!-- fim do body -->

</html>
<!-- fim do html -->

Observe que 1° definimos uma função em js que aplica a visibilidade do elemento:

nesteDocumento.pegueEsseElemento(id).apliqueEstilo.mostrar = visibilidade;

as variaveis id e visibilidade são os parâmetros passados por argumento no body do HTML:

<a href="#" onMouseOver="mostrarElemento('prodImagem', 'inline');" onMouseOut="mostrarElemento('prodImagem', 'none');">Produto 001</a>

Ou seja, quando a página é carregada pelo navegador, o css aplica um display:none na div prodImagem, isso esconde ela. Quando o mouse passa sobre o link, a função do js é carregada, fazendo com que o estilo display aplicado anteriormente pelo css seja substituido por um novo.

Agora só falta inserir um elemento img dentro da div prodImagem.

ok?

abraço.

#5