Alterar background da página

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...

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.

Publicidade

Gostou? Compartilhe com seus amigos!

Ícone Facebook Ícone Twitter Ícone Linkedin
Comentários

Deixe um comentário

Subir Página