Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
>
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.
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>Não consegui, talvez seja culpa do meu pouco conhecimento. Tentei colocar essa função de todas as formas e nada.
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;
} 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>
Você pode utilizar onmouseover na imagem do 'x'.
Pode encontrar um exemplo aqui: http://www.w3schools.com/jsref/event_onmouseover.asp