Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

vonzuben

Como capturar banner para cada tipo de resolução ?

Por , em Javascript

Recommended Posts

vonzuben    12

vonzuben
Postado

Como capturar o banner para cada tipo de resolução ?

 

tenho que fazer 2 banners aonde se enquadra para tipo monitor de 15 e outro de 17

 

Estava vendo o banner do submarino onde adapta o tamnho em qualquer resolução

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

Isso dá pra resolver com CSS,

 

Eles fazem da seguinte maneira, eles colocam uma DIV com um display:block; q fica com o width 100%. Então eles desenvolvem um banner com sei la 1280 px de largura e coloca ela como background dessa div centralizado. então conforme o usuário redimenciona ele foca sempre no centro do banner.

 

Abssss

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roosevelt Franklin    2

Roosevelt Franklin
Postado

Use a seguinte função para capturar a resolução e inserir o flash correto:

 

<script type="text/javascript">
function getBG(x)
{
switch(x)
{

case 1280:
document.div.flash = "128.swf"
break;

case 1024:
document.div.flash = "1024.swf"
break;

case 800:
document.div.flash = "800.swf"
break;



}
}
</script>
</head>
<body onLoad="getBG(screen.width)">

Construa os arquivos 800.swf, 1024.swf e 1280.swf, e coloque-os dentro da <div id="flash">

 

Pronto!

Para cada resolução do usuário o HTML vai caregar o flash correto!

 

Abraços e qualquer problema poste de novo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

Olha por exemplo esse banner aqui desse hotsite no site da americanas.

http://www.americanas.com.br/hsl/8099/62685

 

O site da americanas, ele é desenvolvido para rodar com visualização mínima de 1024, pq mais de 80% dos usuários q compram no site é com essa visualização e hotsites assim saum desenvolvidos pra funcionar bem entre 1024 e 1280, então repare q se você abrir seu navegador com 1024 e for expandindo a janela, ele vai ficando centralizado e o background acompanha até 1280px.

 

O lance é q desenvolvemos uma imagem com 1280px onde o conteúdo principal tem de ficar no centro do banner, nesse caso , se quiser q o conteúdo fique alinhado ao centro e naum a esqueda

 

Olhe como fica o código CSS: http://images.americanas.com.br/Applicatio...n/css/style.css

E olhe a imagem: http://images.americanas.com.br/Applicatio.../img/header.jpg

E o código HTML para funcionar

<div class="hotsiteHeader">
			<a href="http://www.americanas.com.br/hs/8098" class="simpleBanner"><span><strong>Loja Dican</strong></span></a>  </div>

com flash.

http://www.americanas.com.br/hs/7260?chave...;WT.mc_ev=click

 

Se você olhar no firebug, vai ver q o princípio é o mesmo.

 

Abssss e espero q sirva pra você.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

Sim,

 

Tipo, o conteúdo principal do meio do banner, tem q ter uma área de 770px mais ou menos, então ela ficará adaptável tb para resolução de 800x600

faça um teste, gere uma imagem com um quadrado azul grande com 1280px e centralizado nele , você coloca um quadrado sei la, vermelho com 770px e faz essa parada ae como postei em cima.

 

Ele vai ficar centralizado nas 3 resoluções e o banner ficará azul até esse tamanho de 1280px, se você quiser , ainda pode por um background azul na div q ele expande até resoluções maiores.

 

Ficaria mais ou menos assim a pespectiva da imagem:

_____________________

[_______[_____]_______]

 

 

Faz um teste ae e me fala

 

Abssss

Compartilhar este post

Link para o post
Compartilhar em outros sites

vonzuben    12

vonzuben
Postado

Isso eu sei, pois só fazer o banner para 800x600 e centralizar e ficará certo em todos

 

mas não é isso que eu quero não jogar background no fundo

 

vou fazer que nem o Roosevelt falou, apesar que da mais trabalho pois tenho que fazer 3 banners

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito