Neste tutorial mostrarei como fazer um efeito, que possibilita ao usuário escolher qual será background da página. Utilizaremos a biblioteca Jquery.
Para isso você vai precisar de dois arquivos Jquery...
- Biblioteca Jquery: http://jquery.com/download/
- Jquery Cookie: http://plugins.jquery.com/cookie/1.3.1/
Após isso crie uma página html, chamando alguns arquivos, que no nosso caso, serão os 2 arquivos Jquery a cima, e também um arquivo externo CSS, e um externo JS (ou se preferir, você pode utiliza-los internamente na mesma página). Apenas cuide os caminhos e os nomes dos arquivos jquery, css, e js, para funcionar corretamente o tutorial.
alterar-background-da-pagina.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Everson da Luz">
<title>Alterar background da página</title>
<script src="jquery/jquery-1.9.0.js" type="text/javascript"></script>
<script src="jquery/jquery.cookie.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<ul class="backgroundLista">
<li><img src="images/background-1.jpg" alt="background-1"></li>
<li><img src="images/background-2.jpg" alt="background-2"></li>
<li><img src="images/background-3.jpg" alt="background-3"></li>
<li><img src="images/background-4.jpg" alt="background-4"></li>
<li><img src="images/background-5.jpg" alt="background-5"></li>
</ul>
</div>
</body>
</html>
Agora no arquivo CSS, coloque esse estilo, apenas para fins didáticos, não explicarei o CSS, pois não é o foco nesse tutorial...
style.css
*{
margin:0px;
padding:0px;
border:0px;
}
.content{
width:980px;
margin:50px auto 0 auto;
}
.backgroundLista{
list-style:none;
}
.backgroundLista li{
float:left;
}
.backgroundLista img{
width:180px;
height:115px;
margin:0 10px 0 0;
border:2px #FFF solid;
cursor:pointer;
}
E por fim o arquivo JS, que fará toda a mágica...
script.js
$(document).ready(function () {
// Se existir o cookie com o nome imageBackground será colocado o seu valor como background da página
if ($.cookie("imageBackground")) {
$("body").css("background-image", "url('" + $.cookie("imageBackground") + "')");
}
// Senão, colocamos o endereço da primeira imagem como background da página
else {
$("body").css("background-image", "url('images/background-1.jpg')");
}
// Ao clicar na imagem
$(".backgroundLista li img").click(function () {
// Se existir o cookie com o nome imageBackground será apagado o seu valor
if ($.cookie("imageBackground")) {
$.cookie('imageBackground', null);
}
// Obtem o valor contido no src da imagem clicada
var imagem = $(this).attr("src");
// Aplica à tag body, um style de background-imagem, com o valor da variável imagem
$("body").css("background-image", "url('" + imagem + "')");
// Adiciona um novo valor para o cookie que contem o nome imageBackground
$.cookie('imageBackground', imagem, {path: '/'});
});
});
O código já esta todo comentado, e é de fácil entendimento, só gostaria de ressaltar, sobre o Jquery Cookie, na verdade sem ele já funcionaria quando o usuário clicasse na imagem, iria trocar o background, mas caso o usuário troque de página, o background voltaria para o padrão, mas utilizando o Jquery Cookie, gravamos o valor da imagem clicada, em um Cookie, e verificamos quando a página esta sendo carregando se existe esse Cookie, e caso exista, será colocado o valor dele, como background da página, fazendo assim, o background escolhido ficara em todas as páginas do site.
Demonstração
Download
