Feeds
Newsletter
Banner expansíveis - Dicas úteis
Olá amigos!
Há pouco tempo atrás eu estava desenvolvendo a parte comercial de um portal, quando me deparei com várias dúvidas em relação aos banners expansíveis. Dúvidas estas, sobretudo, referentes às diferenças de plataformas (Windows / Linux), navegadores (IE / Mozila / Firefox) e a configuração da tela dos usuários (800x600 / 1024x768 / etc).
Bem, nesse artigo não vou abordar como desenvolver o banner em Flash propriamente dito, pois isso vocês encontrarão no artigo abaixo desenvolvido por Felipe Gomes:
http://www.imasters.com.br/artigo.php?cn=3541&cc=270
Dúvidas mais frequentes:
01. Como fazer com que o banner fique no lugar exato com as diferentes configurações de telas dos usuários?
Defina no seu html exatamente o espaço onde o banner será colocado. Você pode utilizar uma tabela para definir isso. No exemplo, estou utlizando o tamanho considerado padrão (468x60), mas que pode ser adaptado conforme o seu layout.
Nessa tabela, utilize o alinhamento Vertical "No Alto", para que o banner fique exatamente no lugar marcado, já que o alinhamento padrão ficaria no centro da célula.
Insira o seu layer dentro desse espaço. Geralmente, quando você cria um layer pelo Dreamweaver, ele aparece no canto superior esquerdo da janela. Clique no ícone referente ao layer e arraste-o para dentro do espaço que você criou.
Algumas dicas
Dê um nome ao seu div. No exemplo abaixo eu o chamei de "banner" (Isso será util mais tarde).
Apague os valores dos campos E e A. Esses valores são referentes à posição do DIV com relação ao topo e o lado esquerdo da sua janela. Sem eles, nosso DIV tomará a posição do local onde foi colocado no código, ou seja, o espaço que criamos para o banner.
Não se assuste se dentro do Dreamweaver o layer aparecer em outro ponto da tela.
Pronto, dessa forma o banner funcionará em qualquer configuração de tela. Contudo, nos navegadores como Mozilla e Firefox podem apresentar problemas, pois esses navegadores tendem a montar o site no canto da página e trazê-los ao local final assim que carregada, deixando o DIV fora do espaço programado.
Uma boa dica é reconhecer quando o navegador é diferente do Internet Explorer e fazer um pequeno resize de 1 pixel utilizando javascript.
Função:
<Script language="Javascript">
// Da um resize na pagina, para que o mozilla possa reconhecer banners expansiveis
function Resize(){
if(navigator.appName!="Microsoft Internet Explorer"){
window.moveTo(0,0);
window.resizeTo(screen.width-1,screen.height-1);
window.resizeTo(screen.width,screen.height);
}
}
</Script>
Na tag <BODY> do seu html, insira a propriedade: onLoad="Resize()"
Ex.: <BODY ONLOAD="Resize()">
02. Por que meu banner não fica com fundo transparente no Netscape, Mozilla e Firefox?
No artigo publicado pelo Felipe Gomes (link acima), ele mostra claramente para se criar o parâmetro de transparência para o Flash:
<param name="wmode" value="transparent">
Mas não esqueça de colocar a mesma propriedade dentro da tag <EMBED>, pois é nela que os navegadores como Netscape e Firefox se baseiam.
Ex.: <embed src="banner.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="250"></embed>
03. Por que os links abaixo da transparência do banner não funcionam no Netscape, Mozilla e Firefox?
Esse é um problema frequente de quem trabalha com esse tipo de banner. Uma dica interessante é alterar a área de visualização do DIV, Deixando inicialmente do tamanho de nosso banner (nesse caso, 468x60). Quando colocarmos o mouse sobre o mesmo, tirar esse limite, e quanto tirarmos o mouse, redefini-lo.
Vamos lá!
Selecione o seu DIV e preencha as áreas de corte D e X, conforme exemplo abaixo:
Com o DIV selecionado, abra a guia de Comportamentos do Dreamweaver (Shift + F3).
Em primeiro lugar defina a versão dos eventos. Siga os passos abaixo:
Agora vamos à ação propriamente dita. Clique novamente no ícone + e depois em Alterar a propriedade. Na janela que se abrirá, siga os passos a seguir:
Repare que na paleta de comportamentos, na opção eventos, estará escrito OnClick. Altere para OnMouseOver.
Ok, agora repita a operação para Alterar a propriedade, mas dessa vez vamos retornar a área visível do DIV, com as configurações abaixo:
Repita o procedimento de alterar a propriedade OnClick para OnMouseOut
É isso aí amigos, agora os links abaixo do banner expansível funcionarão em todos os navegadores.
Qualquer dúvida, crítica ou sugestão, por favor entrem em contato comigo através do e-mail bruno@eta.com.br.
Um grande abraço e até a próxima.
Interação
15 comentários
usuário removido
25/04/2006 17h33
Para habilitar links abaixo da DIV
Basta adicionar o parâmetro "wmode=opaque" que tudo o que estiver abaixo do objeto será acessível.
Não precisa sujar tanto o código para alinhar o banner, utilizando web standards fica muito mais simples e sem "gambiarras" da Macromedia/Adobe.
Luiz Cláudio Costa
15/05/2006 15h43
Banners Abertos
Olá, gostaria de parabenizar o Bruno, por está excelente matéria sobre Layer. Aproveito a aportunidade para perguntar, se existe alguma solução para os banners expansíveis em flash, que já abrem abertos (OnMouserOut), e depois fecham ficando 468x60. Neste Caso a solução da área de corte que viabilizou os links no Mozilla..., passa a não mostrar toda área do banner expandido, por estar com sua área de corte limitada em 468x60 na função OnMouserOut.
Marcelo Gomes
07/08/2006 23h11
Falando francamente...
É por causa de artigos como este que nós webdesigners voltamos sempre e ajudamos a fazer do IMasters a ferramenta mais importante do webdesign brasileiro nos dias de hoje! MUITO OBRIGADO E PARABÉNS!
Marcelo Gomes
09/08/2006 18h41
Deu tudo certinho e além!
Olá pessoal, deu certo o sistema, consegui fazer um banner em flash, expansível, sem bloqueio de active X, 3D e transparente! Quem quiser conferir: http://www.msgdesign.com.br (clique no link do banner, embaixo da tela)
João Telmo Cabral Junior
14/08/2006 14h18
Exemplo
Olá, foi sem dúvida uma ótima matéria, mas axo que deveria ter um aquivo exemplo para ser baixado para que o entendimento do mesmo possa ser maior.
Abraços
Luiz Cláudio Costa
15/09/2006 22h35
Super Banner
Olá,
gostaria de saber se existe alguma solução para quando trabalhamos com super banner expansível, mas que já entra aberto e depois que se contrai para seu tamanho normal 728x90. Tenho um campo de texto para busca (form), que fica abaixo deste tipo de banner, mas quando a página é carregada e o banner é mostrado, não consigo clicar dentro da caixa para digitar nada. O layer transparente do banner do banner no seu tamanho aberto, cria uma camada sobre o campo bloqueando tudo que se tenta digitar dentro do campo!! Será que existe alguma solução??
Abraços,
Luiz
João Melo
27/10/2006 14h57
Uma peguena correção
Faz tempo que temto fazer este tipo de banner mas ñ funcionava, agora deu certinho, mas na área corte D e X deixe os valores vazios, pq se tiver uma área ex: procura ou mesmo o Menu esta poderá ser clicada, mas os campos D e X estiverem com valor ñ poderão ser clicadas.
A matéria estar super.
fausto torner
21/02/2007 21h13
banner expansível
Li sua matéria no imaster e achei o artigo ótimo, mas pergunto se eu criar um random de 2 ou mais banners expansíveis , como deve ser o código para chamar os divs.Obrigado ,Fausto Torn.
Douglas Brucieri
16/03/2007 17h02
Ainda tem um pequeno BUG.
Olá Bruno, como vai? Amigo acho que encontrei um Bug mesmo com essa função no FIREFOX. no site www.cerc21.com.br/novo/ você vai verificar que tem um banner expansivo e realmente sua função está funcionando. Só tem um porém, ele só ativa o que está abaixo do flash(div) depois que você vai com o mouse até abaixo do tamanho grande do flash.
Alex Sant Anna Silverio
20/03/2007 13h10
Função para o Mozzila / Firefox
A função em Java Script, funciona melhor desta forma.
<script language="javascript">
// Da um resize na pagina, para que o mozilla possa reconhecer expansiveis
function resize() {
if ((navigator.appName!="Microsoft Internet Explorer") && (screen.width == 1024) && (screen.height == 768))
{
window.moveTo(0,0);
window.resizeTo(screen.width-225,screen.height-225);
}
}
</script>
</head>
<body onload="resize()">
Ou seja, quando o usuário estiver em resolução 800*600 com seu Firefox, ele não sofre o resize, mas quando for em 1024*768 ele faz o resize ajustando a posição da LAYER na tela.
Boa Sorte!
Michelle Nastasi
30/10/2007 08h17
pekeno probleminha
o banner em flash aparece uma movimentação de posicionamento entre o ie e o mozzila ... usei tudo o ke ta falando no tutorial mas nau deu certu =/
(www.herbst.com.br)
glauce carcereri leite
11/06/2008 10h24
banner expansível
Fiz um uma banner expansível, mas ele fica abrindo e fechado direto , e não funcionar quando eu passo o mouser. Fechar com eu fiz no flash:
this.bt_retraido.onRollOver =
function() {
gotoAndPlay("cena_expandido",1);
}
E na segunda cena:
this.bt_expandido.onRollOut=
function(){
gotoAndPlay("cena_retraido",1);
}
this.bt_expandido.onRelease=
function(){
getURL("http://www.easynet-rj.com.br/","_blank");
}
Onde está o erro? .obrigada glauce.
Isamara Pimentel César
27/02/2009 16h18
Só funciona uma vez!!!
Olá Bruno... Obrigada pelo tutorial, me ajudou bastante, porém o codigo para o banner não atrapalhar os links que ficam abaixo do banner expansível no Netscape, Mozilla e Firefox só funciona uma vez, depois o erro persiste e os links ficam sem acesso, inclusive aparece a borda do flash quando clicamos na área.
Já não sei mais o que fazer!!!!!!
Paulo Santos
26/09/2009 21h42
Templates Joomla
Olá,
um cliente me pediu para instalar um template em Joomla, que esta rodando sem problemas, e agora quer um banner expansível em flash no topo.
Já tentei de tudo e nada.
Alguma dica?
Valeu
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.