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.

Assuntos relacionados:

• Retire a borda do SWF no InternetExplorer
• Colocar Rodapé fixo no bottom
• Desabilitar ActiveX em sites com JavaScript
• Refresh apenas no CSS da página
• Mestre Yo – Desenho em CSS