Tutorial: Backgroud de três cores que muda

  

Olá gente! Hoje tá sol... Sim, pois bem. Eu estava planejando uma surpresinha pra vocês... Vou voltar a postar tutoriais com mais frequência.

O hipertutorial é da querida Chili do PINK Pimenta do  Então créditos à ela! 

Você tem que selecionar 3 imagens, certo??
Agora, vá em Elemento da Página e depois em Adicionar um Gadget.
Agora clique em HTML/Java Script.

E cole:

<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}
#estilo a:hover img{
border: 2px solid #bdebff;
}

</style>
<div id="estilo">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(Imagem 1)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(Imagem 2)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(Imagem 3)"});
});
});
</script>

<center><a href="javascript:void(O)" id='bgcolor1' title="Título Aqui"><img src="Imagem 1" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="Imagem 2" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="Imagem 3" /></a></center>
</div>


Bom, em vermelho, é a URL do background 1,
em laranja, a URL do background 2,
e em verde a URL do background 3.

Gostaram? Comentem!

Beijos e guraná,

Nandinha