Imagem de fundo

SCSSP · Março 17, 2009

Bom dia pipousss !!

Olha, não sou nenhum expert em script, mas consigo dar um jeito, porém estou com um probleminha pois tenho uma página onde quero que seja visualizada independente da resolução do video do usuário. Tenho esse código abaixo mas não está funcionando, alguém pode me dar um HELP !! Tks

Obs : é a primeira vez que estou postando aqui ok .. se estou fazendo algo errado, me digam !!

Se algum puder me ajudar agradeço imensamente !!!!, só falta isso na página ok.

>>>>>>>>> esse coloquei entre <head> e >/head>

&lt;script type="text/javascript">
function getBG(x)
{
switch(x)
{
case 1600:
document.body.background = "http://site/teste/fundo1600x1200.jpg"
break;
case 1280:
document.body.background = "http://site/teste/fundo1280x1024.jpg"
break;
case 1024:
document.body.background = "http://site/teste/fundo1024x768.jpg"
break;
case 800:
document.body.background = "http://site/teste/fundo800x600.jpg"
break;
case 640:
document.body.background = "http://site/teste/fundo640x480.jpg"
break;

}
}
</script>

>>>>>>>>> esse coloquei entre <body> e >/body>

<style>
.r640 { background-image:url(http://site/teste/fundo640x480.jpg); }
.r800 { background-image:url(http://site/teste/fundo800x600.jpg); }
.r1024 { background-image:url(http://site/teste/fundo1024x768.jpg); }
.r1280 { background-image:url(http://site/teste/fundo1280x1024.jpg); }
.r1280 { background-image:url(http://site/teste/fundo1600x1200.jpg); }
</style>
&lt;script>
var resolucao = new Array();
resolucao.push({tolerancia:new Array(0,640) , height:480} );
resolucao.push({tolerancia:new Array(641,800) , height:600} );
resolucao.push({tolerancia:new Array(801,1024) , height:768} );
resolucao.push({tolerancia:new Array(1025,1280), height:1024});
resolucao.push({tolerancia:new Array(1280,1600), height:1200});
var refreshBackground = function(){
for(var i=0; i < resolucao.length;i++){
if(document.body.clientWidth >= resolucao[i].tolerancia[0] && document.body.clientWidth <= resolucao[i].tolerancia[1]){
document.body.className = 'r'+resolucao[i].tolerancia[1];
resizeTo(resolucao[i].tolerancia[1],resolucao[i].height);
}
}
}
window.onload = function(){
refreshBackground();
window.onresize = refreshBackground;
}
</script>

Editado Março 17, 2009 por SCSSP
Adcionar tag's (Jonathan)

.Andreia. · Março 20, 2009

bem vindo ao forum!

qual o problema que aparece? outra coisa, tenta melhorar o codigo por exemplo, existe mta repetição no CASE:

function getBG(x)
{
switch(x)
{
case 1600:
document.body.background = "http://site/teste/fundo1600x1200.jpg"
break;
case 1280:
document.body.background = "http://site/teste/fundo1280x1024.jpg"
break;
case 1024:
document.body.background = "http://site/teste/fundo1024x768.jpg"
break;
case 800:
document.body.background = "http://site/teste/fundo800x600.jpg"
break;
case 640:
document.body.background = "http://site/teste/fundo640x480.jpg"
break;

}
}

para

function getBG(x)
{
var imagem = "";
switch(x)
{
case 1600:
imagem = "fundo1600x1200.jpg"
break;
case 1280:
imagem = "fundo1280x1024.jpg"
break;
case 1024:
imagem = "fundo1024x768.jpg"
break;
case 800:
imagem = "fundo800x600.jpg"
break;
case 640:
imagem = "fundo640x480.jpg"
break;

}
document.body.background = "http://site/teste/" + imagem;
}

Cardon · Maio 3, 2009

tenta esse codigo amigo

so muda onde tem que mudar (endereço de imagens)

para mim deu certo

qualquer dúvida fala ae

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mostra e esconde divs</title>
<script type="text/javascript">


screenSize = window.screen.width;
img = new String();

window.onload = function muda(){
document.getElementById('princi').background = 'http://endereço/exemplo/'+img;
}


switch (screenSize)
{
case 640:
    img = "imagem_para_640";
    break;
    
case 800:
    img = "imagem_para_800";
    break;
    
case 1024:
    img = "imagem_para_1024";
    break;
    
case 1280:
    img = "imagem_para_1280";
    break;
    
case 1600:
    img ="imagem_para_1600";
    break;
    
default:
    alert("resolução desconhecida");
    
}

    
    




</script>
</head>
<body id="princi">

<h1>MUDANDO A COR CONFORME O TAMANHO DA RESOLÇÃO<h1>
<br>
<br>
<h1 style="color: #ff0000;"><script type="text/javascript">
document.write(" Você está usando a resolução com a respectiva largura de "+screenSize+"!")

</script></h1>

</body>
</html>

Entrar

Imagem de fundo

Pergunta

SCSSP

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

Cardon

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades