Banner com DIV Flutuante e Transparente
dezembro 23rd, 2008Testado e aprovado no Firefox e I.E
Banners em DIVs flutuantes são ótimos em substituir os finados pop-ups. Um bom exemplo pode ser visto em portais como Uol e outros de tenham muita publicidade, são muito usados…
Pra fazer o que tinha em mente eu precisava de três informações:
1- Como colocar uma DIV por cima do conteúdo da página.
2- Em casos de Flash, como deixar o fundo transparente.
3- Como fechar a DIV após a exibição, utilizando um link/botão.
Resolvendo as questões:
1- Pra colocar a DIV por cima do conteúdo eu já sabia que bastava usar as propriedades:
position:absolute;
z-index:1;
Ok. Next.
2- Pra deixar o Flash com fundo transparente basta colocar entre as tags a linha:
<span> </span>
Pra quem usa o Dreamweaver, quando inserimos um SWF e aparece um bloco de linhas de códigos, geralmente vem com <span> </span>, daí é só trocar o opacit por transparent e pronto.
3- Agora, pra fechar DIVs é que é mais difícil. Eu já sabia da existencia da propriedade visibility:hidden; no CSS, mas não sabia como fazer uma DIV mudar de propriedades ou de classe por um link.
Pesquisei por vários fóruns mas não consegui uma solução, já tava ficando com raiva quando pedi ajuda do meu amigo Ruan que me passou um link ensinando a Exibir e esconder DIV com JavaScript, e pronto, problema resolvido.
Vamos ao que interessa:
1º No código da sua página, cole isso antes da tag :
Esse é o CSS que vai formatar a DIV que vai conter seu banner:
<!-- #nomeDiv{ position:absolute; width:200px; height:200px; z-index:1; left: 166px; top: 209px; }
#nomeDiv a{ padding:5px; border:1px solid #000; text-decoration:none; background:#000; color:#fff; } #nomeDiv a:hover{ background:#fff; color:#000; } -->
Esse é o JavaScript que vai fazer o link Fechar funcionar:
<script>// <![CDATA[
function controlaCamada(nomeDiv)
{
if( document.getElementById(nomeDiv).style.visibility == "hidden" )
{
document.getElementById(nomeDiv).style.visibility = "visible";
} else
{
document.getElementById(nomeDiv).style.visibility = "hidden";
}
}
// ]]></script>
2º Agora, depois da tag , cole isso:
3º Onde está escrito ESPAÇO, insira o conteúdo do seu banner, pode ser uma imagem, ou textos, ou imagem e textos, ou um SWF, qualquer coisa. Eu como sou nada criativa, fiz um quadradinho andando no seu quadrado, só a nível de demonstração.
4º Antes do código do SWF que vc acabou de inserir, coloque isso:
<a onclick="controlaCamada('nomeDiv')" href="#">Fechar</a>
5º Agora teste. É pra tá funcionando, que nem tá aqui.
Obs.: Onde vc ver “nomeDiv” é o nome que a DIV que contém seu banner deve ter. Caso vc resolva mudá-lo, certifique-se de muda-lo também no CSS e no JavaScript, caso contrário, vai dar zica.
♥ Download dos arquivos do meu exemplo ♥
P.S: Esse post é um presente de Natal pro meu amigo Renzo.
janeiro 27th, 2009 at 15:19
A coisa mais linda teu site.
junho 16th, 2009 at 08:22
Extraordinária explicação, agradeço por ter tamanha paciência e força de vontade, espero com meus sinceros votos de sorte, que continue com seu blog, e que seja ponto de referência para muitos…
Abraços.
At.:
Jhonny.
goDesigner
http://www.godesigner.com.br
junho 18th, 2009 at 07:05
Bem, o tópico é antigo mas acho que vale a pena.
Para fechar a DIV do Flash transparente através do flash é só colocar uma ação no botão fechar (dentro do flash), para que leve o filme a um frame vazio no _root. ex:
on (release)
{
_root.gotoAndPlay(5);
}
onde o frame 5 está vazio.
No frame 5 coloque a ação:
getURL(“javascript:controlaCamada(‘nomeDiv’);”);
stop();
prontinho, fecha a DIV de dentro do Flash.
Excelente dica, me concedeu mais uns anos de vida!
junho 29th, 2009 at 20:43
Boa noite Lia, estava a navegar na web e olhei seu portfólio, gostei muito, são excelentes front-end’s web. Meu nome é Thiago Luiz Rodrigues, moro em Rondônia sou arquiteto SOA de uma empresa, estamos em um projeto de e-commerce, e precisamos de um designer de interface para algumas telas, queria saber se você esta disponível para ums projetos free-lance durante do desenvolvimento do e-commerce, e após tambem eu preciso que vocês conheça de XHTL, CSS, e estruturação de conteúdo em tablelss e o mais importante criatividade para criar.
Precisamos disso com urgência, pois o projeto esta um pouco atrasado abaixo segue o link do sistema.
http://www.gramotos.com
http://www.gramotos.com/adm
por favor me add no msn para falarmos
msn: bobboyms@hotmail.com
e-mail: bobboyms@yahoo.com.br
cell: (69) 9954-6263
Aguardo seu contato com urgência para conversarmos
agosto 14th, 2009 at 15:49
muito bom esse artigo.. parabens. acho que hoje o css tem revolucionado o mundo web facilitou muito..
outubro 21st, 2009 at 14:18
segui o seu tutorial e del certo, mas quaando clico em fechar o div,q esta meu swf, o som do meu swf continua.
sabe porque.
Mas obrigado era isso q estava procurando.
Diego
outubro 21st, 2009 at 14:59
bonito blog
outubro 22nd, 2009 at 08:41
Diego,
Então, pra resolver esse seu problema você pode fazer o seguinte: No CSS, onde você coloca visibility:hidden; pra esconder a DIV, você substitui por display:none;. Não testei, mas acredito que funcione.
Boa sorte! =)
outubro 23rd, 2009 at 07:26
Ola, tentei a substituição e não consegui.
Seria nesta linha neh:
( document.getElementById(nomeDiv).style.visibility == “hidden” ) , mas como ficaria?
Obrigado
Diego
novembro 17th, 2009 at 11:56
olá, estou fazendo um banner exatamente nesses moldes, um quadro transparente de 500×425 com, digamos, um quadrado “andando na tela”. Notei que seu banner possui o mesmo comportamento indesejável que o meu: nos navegadores diferentes do Internet Explorer, a área transparente do quadro tampa o texto que está, tornando ele inacessível enquando a animação está visível.
Será que alguém sabe como resolver isso?
Para você entender melhor, a animação começa como um pequeno banner de 120×40, e não deve incomodar o usuário, somente se ele clicar em cima, o banner deve crescer e ficar com 500×425. Enquando o banner não foi clicado, toda a área de 500×425 fica inacessível no Firefox, Chrome, Opera, etc. Só funciona no Internet Explorer.
Estou quase concluindo que não há solução.
fevereiro 11th, 2010 at 17:52
Curti o banner, muito bom, de forma legal! não cheio de frescura como muitos fazem pelo dreamweaver!!!
Obrigado.
maio 13th, 2010 at 13:52
Vale acrescentar que o z-index:1 só vai servir quando o site não tiver muito conteudo… ou seja… os elementos de fato estarem atrás do z-index:1
Pra não ter surpresas, basta colcoar o z-index:1000, assim terá certeza que estará acima de tudo sempre.
Apenas colaborando
Cai aqui por acaso.
Visite meu site tbm… http://www.canaldev.com.br, vai aprender muito lá
Beijo
maio 16th, 2010 at 15:53
boa tarde, está de parabéns, fiz aqui e funcionou certinho, queria dar uma incrementada no meu código, como faço pra bloquear a barra de rolagem da pagina que está atras do banner?
maio 29th, 2010 at 15:22
Olá!
Estava enfrentando problemas com o Firefox para fechar esse banner flutuante, mas esse script resolveu o problema.
obs: eu não usei flash no conteúdo da Layer, era uma imagem apenas…
Obrigado!
dezembro 15th, 2010 at 23:15
me salvou hoje
parabens!!!
dezembro 27th, 2010 at 18:15
poxa vida e eu se matando a 15 dias para tentar colocar botoes submit com fundo transparente em cima do iframe e voce com essa jóia de codigo muito parabéns.
julho 16th, 2011 at 18:16
muito bom! linda!