nun ich habe vor 3 backgroundimages in einem DIV wechseln zu lassen.
<!-- html -->
<link rel="stylesheet" href="style2.css" type="text/css" media="screen">
<script language="JavaScript1.2" type="text/javascript" src="diashow2.js"></script>
</head><body>
<div id="header">
<div id="diashow" class="holder">
<!-- style2.css -->
#header { background: url(images/headbg.png) repeat-x; height: 462px;}
#header .holder {margin: 0 auto; width: 960px; height: 451px; padding-top: 12px; }
#diashow { margin: 0 auto; width: 960px; background: url(images/missionbg.jpg); height:451px; background-repeat: no-repeat; padding-top: 12px; }
<!-- diashow2.js -->
var bgimages=new Array();
var pathToImg=new Array();
var inc=-1;
bgimages[0] = "images/missionbg2.jpg"
bgimages[1] = "images/missionbg3.jpg"
bgimages[2] = "images/missionbg.jpg"
bgimages[3] = "images/missionbg4.jpg"
//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("diashow").style.backgroundImage = "url("+pathToImg[inc].src+")";
fade();
}
function fade(step) {
step = step || 0;
document.getElementById("diashow").style.opacity = step/0;
document.getElementById("diashow").style.filter = "alpha(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()",5000)')
<!-- --------------------------------------------- -->
irgendwie funktioniert es nur im Firefox,Safari
kennst du dich vll. nun aus, was ich vorhabe?