[Resolvido] Código Alterar Background

webcaju · Dezembro 15, 2010

Olá galera sou novo aqui, bom na realidade estou fazendo algo bem simples, mas me enrolei, a questão é a seguinte:

Preciso criar alguns 4 links para poder mudar apenas o background da página tenho o seguinte código:

<?php 

session_start();
$fundo = $_GET['fundo'];
$_SESSION['fundo'] = $fundo;
$bgArray = Array("bg1", "bg2", "bg3", "bg4");

if ($fundo == "") {
	$cssClass = $bgArray[rand(0 , count($bgArray) - 1)];
} else if ($fundo == "outono") {
	$cssClass = $bgArray[0];
} else if ($fundo == "inverno") {
	$cssClass = $bgArray[1];
} else if ($fundo == "primavera") {
	$cssClass = $bgArray[2];
} else if($fundo == "verao") {
	$cssClass = $bgArray[3];
}
?>

E os links que altera a variavel:

	<div id = "fundo" align = "right">
		<a href="?fundo=outono"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
		<a href="?fundo=inverno"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
		<a href="?fundo=primavera"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
		<a href="?fundo=verao"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Verão" title = "Verão" style = "display = block;"></a>
	</div>

A variavel definida vem para o body:

<body class ="<?php echo $cssClass; ?>">

Então explicando a ideia caso o usuário não defina nenhum background ele entra em um loop a cada atualização, caso ele defina um valor ex.: Verão o background é gravado em uma seção e ele navega no site todo com esse background definido, bom mas ai entra um outro ponto quando eu passo essa valor pelo link ele coloca na url o http://...?fundo=verao eu queria fazer isso internamente sem passar esse valor para a url não sei se é possível bom to aqui quebrando a cabeça, agradeço pela ajuda de todos...

Obrigado

webcaju · Dezembro 16, 2010

Bom para vocês terem uma idéia vou colocar o link do site:

http://www.joomlacampogrande.com.br/sites/mulheresdobola/

Bom no lado direito no topo da página tem 4 imagens pequenas clique la é verá que o background altera mas o valor vai para a url e eu queria passar internamente...

Se alguem souber uma solução ou um plugin mesmo que faça isso agradeço, pois só falta isso para terminar...

Valew...

Matias Rezende · Dezembro 17, 2010

Olha, para passar internamente como você diz, acredito que o melhor é utilizar Javascript para "pegar" o click e definir qual o background que você quer entrar. Utilizando jQuery, seria algo assim:

$(document).ready(function() {
$('div#fundo a').click(function() {
	// aqui você faz a troca da classe do body
});
});

Se quiser fazer com Javascript mesmo, eu posso mover o tópico para lá que o pessoal te ajuda melhor.

Carlos Eduardo

webcaju · Dezembro 20, 2010

Olá Matias,

Andei pesquisando achei algumas coisas, mas acho que o que vou postar ja sai da categoria php né caso você tenha de mover o tópico para outro lugar fique a vontade, bom vamos la:

Como eu disse estou utilizando joomla em html normal a solução funciona certinho olha o que fiz:

index.php:

<?php

  defined( '_JEXEC' ) or die ( 'Restricted Access' );

?>

<!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" xml:lang = "<?php echo $this->language; ?>" lang = "<?php echo $this->language; ?>" >
<head>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/default.js"></script>
<jdoc:include type="head" />
<?php $this->setGenerator('Caju Comunicação & Design - Criação de Sites & Marketing Digital'); ?>
<?php include_once (JPATH_SITE.'/templates/includesglobal/metatags.php'); ?>
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/960.css" media = "all" type = "text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css" media = "all" type = "text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/joomla.css" media = "all" type = "text/css" />
<link rel = "stylesheet" href = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/site.css" media = "all" type = "text/css" />
</head>

<body>

  <h1><a href="http://www.mulheresdobola.com.br/">Mulheres do Bola</a></h1>

  <div id = "total" class = "container_16" title = "Mulheres do Bola">

     <div id = "fundo" class = "grid_16" title = "Mulheres do Bola" align = "right">
        <a href = "" class = "switchCss" rel = "outono.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
        <a href = "" class = "switchCss" rel = "inverno.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
        <a href = "" class = "switchCss" rel = "primavera.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
        <a href = "" class = "switchCss" rel = "verao.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Verão" title = "Verão" style = "display = block;"></a>
     </div>
.
.
.

Bom eu fiz a chamada da biblioteca jquery-1.4.4.js, o plugin jquery.cookie.js e o script para alterar o background default.js todos esses arquivos estão no diretório scripts dentro do meu template.

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/scripts/default.js"></script>

Links para alterar o background:

     <div id = "fundo" class = "grid_16" title = "Mulheres do Bola" align = "right">
        <a href = "" class = "switchCss" rel = "outono.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
        <a href = "" class = "switchCss" rel = "inverno.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
        <a href = "" class = "switchCss" rel = "primavera.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
        <a href = "" class = "switchCss" rel = "verao.css"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Verão" title = "Verão" style = "display = block;"></a>
     </div>

Acima descrevi o index.php

Agora vou mostrar o código default.js pois os outros dois são a biblioteca jquery e o plugin do cookie:

default.js:

/**
* Função inicial - Responsavel por trocar o css da pagina e gravar no cookie
*/
function init()
{
  // Verifica se existe nome css gravado no cookie(css)
  if($.cookie('css')) {
     // Troca css pelo nome que esta no cookie(css) com a pasta css/
     $('link[rel=stylesheet]').attr('href', 'css/' + $.cookie('css'));
  }

  // Escuta click nos botoes de trocar css
  $(".switchCss").click(function() {
     // Troca css pelo nome que esta no parametro REL dentro do <a> com a pasta css/
      $('link[rel=stylesheet]').attr('href' , 'css/' + $(this).attr('rel'));

     // Grava nome do css no cookie(css), expira 7 dias, funciona todas paginas cookie
     $.cookie('css',$(this).attr('rel'), {expires: 7, path: '/'});
     return false;
   });
}

// Quando a pagina estiver carregada chama a funcao init.
$(document).ready(init);

Bom os css tenho outono.css, inverno.css, primavera.css e verao.css nesses arquivos só tenho o body alterando a imagem e a cor dofundo apenas isso.

Eu creio que o problema esta no default.js ou na chamada, eu não entendo muito de Jquery espero que alguem tenha uma luz...

Valew...

olha o link em apenas html funcionando:

http://www.joomlacampogrande.com.br/sites/mulheresdobola/teste/

webcaju · Dezembro 21, 2010

Galer consegui resolver da seguinte forma:

<head>
.
.
.
<script type="text/javascript">
function mudaFundo(classe) {
	document.getElementsByTagName("body")[0].className = classe;
}
</script>
.
.
.
</head>

<body class = "bg1">
.
.	
.
	<div id = "fundo" class = "grid_16" title = "Mulheres do Bola" align = "right">
		<a onclick = "mudaFundo('bg1');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/outono.png" alt = "Outono" title = "Outono" style = "display = block;"></a>
		<a onclick = "mudaFundo('bg2');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/inverno.png" alt = "Inverno" title = "Inverno" style = "display = block;"></a>
		<a onclick = "mudaFundo('bg3');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/primavera.png" alt = "Primavera" title = "Primavera" style = "display = block;"></a>
		<a onclick = "mudaFundo('bg4');"><img src = "<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/verao.png" alt = "Verão" title = "Verão" style = "display = block;"></a>
	</div>
.
.
.

Agora eu só precisaria gravar esse parametro em um cookie assim quando o usuário definir ficaria esse parametro em quanto ele navega...

Valew....

Entrar

Arquivado

[Resolvido] Código Alterar Background

Recommended Posts

webcaju 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webcaju 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

webcaju 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webcaju 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante