Ir para conteúdo

POWERED BY:

Arquivado

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

Thiago Carvalho

[Resolvido] Script para mudar background

Por , em Javascript

Recommended Posts

Thiago Carvalho    0

Thiago Carvalho
Postado

Olá pessoal,

 

Estou criando um Hot Site e gostaria de personalizar um background para três tipos de resolução -- 1280x1024, 1024x768, 800x600. Para isso comecei estruturando um scriptizinho que parece ser simples, mas alguma coisa está pegando quanto a sintaxe. se puderem me dar um help.

 

o script é assim:

 

<script type="text/javascript">
<!--
var widthRes = window.screen.width;
var bgPath = document.body.background;
function trocaBg {
	if (widthRes == "1280") {
	   bgPath = "fundo1280x1024.jpg";
	   }
	else if (widthRes == "1024") {
	   bgPath = "fundo1024x768.jpg";
	   }
	else if (widthRes == "800") {
	   bgPath = "fundo800x600.jpg";
	   } else {
	  bgPath = "fundo1024x768.jpg";
	  }
}
// -->
Agora eu coloco na tag body do HTMl

<body onload="trocaBg();">

Pronto o código é basicamente assim, mas não funciona... alguém pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Carvalho    0

Thiago Carvalho
Postado

Cara, valeu pela atenção, mas esse erro eu só cometi aqui, no script está com os parênteses 

function changeBg() {...}
eu fiz umas modificações usando a propriedade "className" que eu conheço melhor. ficou assim:

 

<script type="text/javascript">
<!--
var widthRes = window.screen.width;
var bgPath = document.body.className;
function trocaBg() {
	if (widthRes == "1280") {
	   bgPath = "_1280";
	   }
	else if (widthRes == "1024") {
	   bgPath = "_1024";
	   }
	else if (widthRes == "800") {
	   bgPath = "_800";
	   } else {
	  bgPath = "_1024";
	  }
}
// -->
</script>

e no body eu declaro:

 

<body onload="trocaBg();return false;" class="_1024">

na folha de estio está assim:

 

body{margin:0;padding:0;}
._1280{background:url(fundo1280x1024.jpg) no-repeat;}
._1024{background:url(fundo1024x768.jpg) no-repeat;}
._800{background:url(fundo800x600.jpg) no-repeat;}

Mesmo assim esse script não roda...

Se eu solucionar, posto aqui o problema resolvido

 

valeu

 

para ver o site é só acessar Conexão Unime

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

Fala aee amigo beleza ?

 

Dei uma reformulada no seu código, tente um teste com esse aqui

 

<script language=javascript>
function trocaBg() {

var bgPath = document.body.className;
var widthRes = window.screen.width;


if (widthRes == 1280) {
bgPath = "_1280";
}
else if (widthRes == 1024) {
 bgPath = "_1024";
 }
 else if (widthRes == 800) {
 bgPath = "_800";
 } else {
 bgPath = "_1280";
 }
 
 document.body.className = bgPath;
}


</script>


<body onLoad="java script:trocaBg();" onResize="java script:trocaBg();"  class="teste">

</body>

Fiz pequenas alterações, que foram as seguintes :

 

- Joguei as variáveis bgPath e widthRes para dentro da função, assim você pode chamar essa função dentro do evento onresize do body, assim sempre que a pessoa redimensionar a pagina ele tb altera a classe ;)

- Removi as aspas do código nas resoluções para ele comparar com inteiro

- E a ultima era que a variável bgPath você tava substituindo ela pela resolução, por isso naum alterava, no caso tinha q colocar document.body.className = variável.

 

Para você fazer esse ultimo ponto que eu alterei você teria que jogar o elemento body para a variável, e sempre que fosse trocar o valor você jogaria para variável.propriedade.

 

ex.:

var bgPath = document.body;
bgPath.className = 1024;

 

Testa ae amigo, de resto a logica ta certinha e agora deve funcionar perfeitinho pra você.

 

Qualquer coisa q precisar estamos aee

 

abssss

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