Salve.

Vi spiego quello che vorrei fare: Vorrei avere un div con un immagine di sfondo che cambi ogni tot secondo con una dissolvenza.

Girando in rete ho trovato un po' di materiale (utilizzo qualche script di javascript e riesco a metterci un po' mano ma di base di javascript non so nulla). Tra l'altro avevo trovato pure un sito che aveva questo effetto ma non lo trovo più e non ricorderò mai di cosa trattava.

Cmq ora ho lo script ma non funziona. Mi fa la dissolvenza sulla prima immagine e poi non succede più nulla.

Vi posto i codici così date un occhiata.

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<script type="text/javascript" src="js/slider_bkg.js"></script>

<body onload="runBGSlideShow()">

<div id="testata">



TESTATA SITO </p>

</div>


<div id="content">

<div id="contentbg"></div>

</div>


</body>
</html>

CSS:
body {
margin: 0px;
padding: 0px;
background-color: #d9d9d9;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
}
#testata {
background-color: #900;
margin: 0px;
padding: 0px;
height: 135px;
}
#content {
position:relative;
height:744px;
background:url(../images/uno.jpg) top center no-repeat #d9d9d9;
}
#contentbg {
position:absolute;
top:0px;
left:0px;
height:744px;
width:100%;
background:url(../images/uno.jpg) top center no-repeat #d9d9d9;
}
JAVASCRIPT:
<!--
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}


// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 5000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '/images/uno.jpg'
Pic[1] = '/images/due.jpg'
Pic[2] = '/images/tre.jpg'
Pic[3] = '/images/quattro.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length
var speed = Math.round(600 / 100);
var timer = 0;

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
/*if (document.body){*/
//document.body.background = Pic[j];

elback = document.getElementById('content');
elfront = document.getElementById('contentbg');

elback.style.backgroundImage=elfront.style.backgro undImage; //First set the actual background to the current image.
changeOpac(0, 'contentbg'); //now we can change the forground to be transparent

elfront.style.backgroundImage="url("+Pic[j]+")";



//fade in image
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + 'contentbg' + "')",(timer * speed));
timer++;
}

j = j + 1;
if (j > (p-1)) j=0;
t = setTimeout('runBGSlideShow()', 7000)
//}
}

//-->
Spero riusciate ad aiutarmi... Ci sto lavorando da ieri mattina!! GRAZIE 1000!!!!