#contentslider {
position:absolute;
top:0px;
width: 960px;
height: 444px;
background:url(images/contentlayer.png);
background-repeat:no-repeat;
right: 0px;
left: 0px;
z-index:2;
}
<head>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen"/>
<script language="JavaScript1.2" type="text/javascript" src="diashow.js"></script>
</head><body>
<div id="contentslider"></div>
</body>
</html>
var bgimages=new Array();
var pathToImg=new Array();
var inc=-1;
bgimages[0] = "http://www.domain.de/images/contentlayer4.png"
bgimages[1] = "http://www.domain.de/images/contentlayer3.png"
bgimages[2] = "http://www.domain.de/images/contentlayer2.png"
bgimages[3] = "http://www.domain.de/images/contentlayer.png"
//Images vorladen
for (i=0; i < bgimages.length; i++) {
pathToImg[i]=new Image();
pathToImg[i].src=bgimages[i];
}
function bgfade() {
if (inc < bgimages.length-1) {
inc++
} else {
inc=0
}
document.getElementById("contentslider").style.backgroundImage = "url("+pathToImg[inc].src+")";
fade();
}
function fade(step) {
step = step || 0;
document.getElementById("contentslider").style.opacity = step/0;
document.getElementById("contentslider").style.filter = "beta(opacity=" + step + ")";
step = step + 2;
if (step <= 0) {
window.setTimeout(function () { fade(step); }, 1);
} else {
step = 0;
}
}
if (document.all||document.getElementById) window.onload=new Function('setInterval("bgfade()",4000)')
Ich hab folgendes Problem.. ich würde gerne den übergang zum 2 Hintergrundbild sanfter machen.. also leich verblassen und das nächste wird eingeblendet.. weiss jemand wie ich das anstelle?