Ir para conteúdo

POWERED BY:

Arquivado

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

Gilsoney

Banner que fecha após passar o mouse por cima

Por , em Javascript

Recommended Posts

Gilsoney    1

Gilsoney
Postado

Olá, eu gostaria de saber como fazer um banner com link e caso o usuário passasse o mouse em cima do "X" (para fechar) do banner ele fechasse completamente mas se o usuário passar o mouse somente em cima do banner ele não feche pois eu iria colocar um link nesse banner. Resumidamente é isso que eu quero:http://casadospassaros.net/2011/10/como-reproduzir-a-calopsita/ Acho que seja feito com javascript mas não tenho muito conhecimento, então se puderem até postar o código pronto para eu adaptar agradeço muito!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilsoney    1

Gilsoney
Postado

Você pode utilizar onmouseover na imagem do 'x'.

Pode encontrar um exemplo aqui: http://www.w3schools.com/jsref/event_onmouseover.asp

Então, com onmouseover se passar o mouse em cima do banner/imagem ela vai fechar tbm, eu quero que feche tudo só se passar em cima do X como se o X fosse uma div que fecharia a div da imagem ou banner mas se passasse o mouse em cima do banner ele não fechasse.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bri ~    3

Bri ~
Postado

A logica é assim:

func fechar_div_banner(x){
 code;
}

<div id='banner'>
    <div onmouseover="fechar_div_banner(this)">X</div>
    //img do banner, etc
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilsoney    1

Gilsoney
Postado

Consegui, mexi mexi até que saiu alguma coisa. Sei que está bem tosco msm mas depois eu aprimoro kkkk. Segue meu código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FECHAR BANNER</title>

<meta charset="UTF-8">
<script type="text/javascript">
function passar(valor){
	document.getElementById("fechar").style.display = "none";
}
</script>
<style type="text/css">

#banner{
 position:absolute;
 top:100px;
 left:500px;
 float:right;
}
#fechar p{
 position:absolute;
 top:2px;
 left:-450px;
 float:right;
}
</style>
</head>
<body>
<div id="conteudo">
   <div id="banner">
      <div id="fechar"><a href="#" title="Fechar" class="fechar" align="right"  onMouseOver="passar();">X</a>
      <p class="link"><a href="#" ><img src="imagem.jpg" ></a></p>
     
   </div>
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito