Como trocar cores ou imagens do background do seu site ? "Simpris" com o jQuery isso ficou mais fácil ainda !
1 - Primeiro linkamos o jQuery no documento.
2 - Agora vamos fazer a função que trocara o background-color.
function swapColor(color) { $('body').css('background', color); }
O que ela faz é simples, foi dado o nome de troca swapColor e passado como parametro o color então ela diz que a tag body terá o background de acordo com o parametro passado pelo color.
Então você chamara a função da seguinte forma:
Coloquei o javascript:void(0); para que quando for clicado no link a página voltar ao começo do site, com isso ele permanecera no mesmo lugar.
E o segredo está no onClick ele chama o nome que demos a função que é swapColor e passa como parametro que vai entrar no lugar do color a cor que será definida no caso usei o Azul.
Ok nessa parte você já terá feito a troca de background por cores, agora vamos a troca por imagem.
Já com o jQuery linkado a página vamos fazer a seguinte função:
function bgSwap(imageUrl) { $('body').css('background-image', "url("+imageUrl+")"); }
O que essa função faz é passar um parametro e esse parametro é uma variavel os + + utilizados servem para concatenar o background-image com o url.
Então agora é só chamar o background:
<a href="javascript:void(0)" onClick="bgSwap('background.jpg');" >Background</a></li>Funciona como o primeiro só que com algumas alterações.
É isso ai !!!
Abraços
