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

Essa foi a minha melhor descoberta do ano!!! É bastante chato pra um webdesigner fazer formulário, acredite, text input, text area, submit, select, etc, nossa… e fazer funcionar é pior ainda. Eu pelo menos como não sei PHP, ficava pedindo pra programadores amigos fazerem pra mim, só que como serviço de graça vai pro final da fila, esses formulários nunca saiam.

Daí que um belo dia navegando na web eu descobri esse site pForm e na mesma semana eu recebi pelos feeds do blog do Bruno Ávila esse outro phpFormMail. São sites que geram formulários PHP “funcionando” e ainda disponibiliza área de Admin pra configurar o formulário e oferece opção de download. Não acredita?? Eu também não acreditei!! Tudo é feito seguindo no máximo 3 passos, preenchendo as informações que vc quer que tenha. Claro que pra conseguir gerar o formulário o designer tem que conhecer pelo menos as tags de formulário do HTML mas se não souber ainda bem que existe o W3School pra ajudar.

Assuntos relacionados:

• Mestre Yo – Desenho em CSS
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Como fazer Links de Âncora
• Print Screen Sequenciado
• Tag PRE ♥ Tag CODE

Links de âncora servem pra auxiliar na navegação de páginas longas, faz com que um link redirecione direto à um ponto específico, posicionando-o no topo da página, pode ser usado dentro da mesma página ou em outra. É muito útil para quem se preocupa com a Usabilidade e Acessibilidade dos sites.

Como fazer?

LINK PARA DENTRO DA MESMA PÁGINA:

No link coloca-se o seguinte:

<a href="#ancora"> ... </a>

P.S: #ancora é o nome da sua âncora, é para onde o link vai levar.

No local pra onde vc quer que o link vá, coloque:

<a name="ancora"> ... </a>

Ainda não entendeu? Veja o exemplo:

<a href="#ancora">LOCAL DO LINK</a> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <p>texto de exemplo</p> <a name="ancora">Você vai parar aqui!</a>

LINK PARA OUTRA PÁGINA:

Também dá pra fazer um link de âncora para uma outra página. Exemplo:

<a href="endereco.php#ancora"> ... </a>

P.S:
- endereco.php é o nome do arquivo;
- #ancora é o nome da sua âncora, é para onde o link vai levar.

Boa sorte!! :)

Assuntos relacionados:

• Mestre Yo – Desenho em CSS
• Biblioteca JavaScript conserta bugs do Internet Explorer
• Gerador de Formulário PHP
• Tag PRE ♥ Tag CODE
• Aprenda HTML

Esse script tem praticamente a mesma função que o “botão voltar” dos navegadores, então eu poderia nem usá-lo. Mas eu uso sabe porque? Por que tem algumas pessoas, usuários primários, que não conseguem pensar no botão de voltar do navegador ou até mesmo nem sabem que ele tem essa função. E também por causa das pessoas que navegam usando o teclado, como deficientes visuais por exemplo.

Então a nível de lembrete:

<a onclick=”javascript:history.back();”>Voltar</a>

Ao clicar no link, a página retorna á página anterior. Pronto, bem simples.

Uma dica: Esse link funciona, pode testar, mas você vai ver também que ao colocar o mouse em cima, o cursor não vira “mãozinha”. Se isso te incomodar como me incomoda, vc pode aplicar uma “class” a esse link e colocar no CSS: cursor:pointer; Funciona em todos os navegadores.

:)

Assuntos relacionados:

• Desabilitar ActiveX em sites com JavaScript
• Banner com DIV Flutuante e Transparente
• Script para adicionar página em favoritos
• Retire a borda do SWF no InternetExplorer

Assuntos relacionados:

• Gerar ícones .ICO com Photoshop
• Stickers, Badges e Stamps Web 2.0
• Resources de Design para Photoshop estilo Web 2.0
• Evolução do Photoshop
• Wallpaper – Papel de Parede [2]