Um dos grandes desafios para quem vende produtos e serviços na web é criar anúncios interessantes. A maioria dos internautas já se acostumou tanto aos tradicionais banners no alto da página que costuma ignorá-los. Outro formato popular é o pop-up, mas muitas vezes as janelas são fechadas pelos internautas antes mesmo de serem carregadas.

Uma saída criativa para esse problema é usar banners flutuantes, que passeiam pela tela. Esse tipo de anúncio funciona por meio do código DHTML (Dynamic HTML), que nada mais é do que uma combinação do velho HTML com as tecnologias CSS (Cascading Style Sheets) e JavaScript. Escrever o código de um banner flutuante não muito simples exige bons conhecimentos de JavaScript, mas no Dreamweaver MX essa operação pode ser feita visualmente, sem a necessidade de debulhar tags.

Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir e depois a opção Camada. Surge então um retângulo no arquivo HTML. Tudo que estiver nessa caixa aparecerá sobre o conteúdo da página.

O passo seguinte é inserir a imagem dentro da camada. Basta acionar o menu Inserir e a opção Imagem, escolhendo o arquivo desejado. Esse exemplo foi feito com um GIF animado, mas pode ser também uma imagem estática ou uma animação em Flash (nesse caso, acionamos o menu Inserir/Mídia). Não se esqueça de reservar um espaço para o botão Fechar.

Agora é hora de movimentar o banner. Clique na alça do canto superior esquerdo da camada (tenha cuidado para não selecionar apenas a imagem). Depois clique com o botão direito. Escolha a opção Gravar Caminho. Surgirá a janela Linhas de Tempo, que veremos adiante. Clique na alça da camada e a arraste pela tela, traçando o percurso desejado. O Dreamweaver exibe uma linha que acompanha seus movimentos. Quando completar o caminho, solte o botão do mouse.

Passamos agora para a janela Linhas de Tempo, que controla a velocidade e acompanha a posição da camada em cada instante da animação. É importante marcar a caixa Execução Automática, para que a animação seja ativada assim que a página for carregada. A caixa Loop faz com que a animação se repita indefinidamente, mas essa não é a intenção nesse exemplo. Tecle F12 para testar. Se tudo foi feito corretamente, seu banner já está dançando na página. Mas por enquanto não serve pra muita coisa, já que não tem nenhuma área clicável.

Para resolver o problema, precisamos criar duas áreas de clique na imagem: uma manda o usuário para o site desejado e a outra fecha o banner. Isso é feito com o recurso de mapeamento de imagem do Dreamweaver (quem usa uma animação Flash deve mapeá-la dentro do próprio aplicativo).

Selecione a imagem e, na janela de Propriedades, clique na seta do canto inferior direito para exibir todas as opções. Escolha uma das alternativas de mapeamento (reto, circular ou desenho livre) e marque a área do link na imagem. Nesse exemplo, definimos um retângulo em torno da cabeça do boneco que tem nas mãos o Guia da Foto Digital. Um sombreamento indica a área mapeada. Na caixa Link, insira o endereço do site (com http://). Na área Destino, escolha a opção _blank para que o link seja aberto numa janela nova. Com isso, a primeira parte da imagem está mapeada.

Para demarcar a segunda parte, o procedimento é semelhante. Clicamos na opção de mapeamento desejada e contornamos a área do botão Fechar.

Nesse ponto, o procedimento é um pouco mais complicado. A segunda área mapeada não é um link para outro site, mas sim um comando para fechar o banner. Para que isso funcione, precisamos usar um evento JavaScript. Selecione a área mapeada em torno do botão Fechar, acione o menu Janela/Comportamento e clique na aba Comportamento. Essa janela possui duas colunas: Evento (quando acontecerá) e Ação (o que acontecerá). Clique no botão + para acrescentar uma ação à área selecionada. Escolha a opção Mostrar/Ocultar Camada. Na janela seguinte, clique em Ocultar e depois em OK. Dessa forma definimos a ação (fechar a janela), mas não o evento. O Dreamweaver, por padrão, incluirá o evento onMouseOver. Assim, a imagem será fechada quando o mouse passar sobre a área do botão Fechar. Mas queremos que o banner desapareça apenas quando o usuário clicar no botão. Por isso, mudamos o evento para onClick, clicando na seta ao lado da palavra onMouseOver.

Pronto, o banner flutuante agora está completo. Tecle F12 para testar a animação e os links. Para inserir o banner em qualquer página, basta copiar a camada e colar no arquivo HTML desejado. O único cuidado extra é checar se o arquivo já tem uma camada com o mesmo nome da que foi criada para o banner.