para la pregunta 1
algo asi te sirve ?
Código HTML:
Ver original<!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"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript" ></script>
body {
margin: 0;
padding: 0;
}
div#bg-1 {
position: absolute;
width: 100%;
height: 100%;
background-image: url('http://static2.grsites.com/archive/textures/dgren/dgren002.jpg');
}
div#bg-2 {
position: absolute;
width: 100%;
height: 100%;
background-image: url('http://static3.grsites.com/archive/textures/blue/blue003.jpg');
display: none;
}
div#bg-3 {
position: absolute;
width: 100%;
height: 100%;
background-image: url('http://static3.grsites.com/archive/textures/brown/brown007.jpg');
display: none;
}
<script type="text/javascript"> var divIds = ["bg-1", "bg-2", "bg-3"];
var currentIndex = 0;
function changeBackground(country) {
var outDivId = divIds[currentIndex];
currentIndex = (currentIndex + 1 ) % divIds.length;
var inDivId = divIds[currentIndex];
var outDiv = document.getElementById(outDivId);
var inDiv = document.getElementById(inDivId);
$(outDiv).fadeOut("slow");
$(inDiv).fadeIn("slow");
setTimeout(changeBackground, 3000);
}
setTimeout(changeBackground, 3000);