Sådan ?-)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Fade over mellem elementer</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{padding:0px;margin:0px;border:0px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:center;background:#EBD3E2;overflow:hidden;}
#container{position:relative;width:400px;height:300px;background:#ab3;margin:0px auto;text-align:left;}
.fadediv{position:absolute;top:0;left0;z-index:0;width:390px;height:300px;text-align:center;font-weight:900;padding:5px;overflow:hidden;}
</style>
<script language="javascript" type="text/javascript">
var OpC = new Array();
var endOpC = new Object();
var ie = (document.all)?true:false;
var moz = (navigator.userAgent.indexOf("Gecko")>-1)
function startOpChange(elm,end,tim){
if (!ie && !moz)return;
var idx = OpC.length;
for(var i=0;idx>i;i++){
if(OpC[i][0]==elm){
clearInterval(OpC[i][4]);
idx = i;
break;
}
OpC[idx] = new Array();
}
if(idx==0)OpC[idx] = new Array();
if(ie)actOp=elm.filters.alpha.opacity;
else actOp=(elm.style.MozOpacity*100);
if (actOp!=end){
OpC[idx][0]=elm;
OpC[idx][1]=actOp;
OpC[idx][2]=end;
OpC[idx][3]=(end>actOp)?1:-1;
var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
}
}
function opChange(idx){
OpC[idx][1]+=OpC[idx][3];
if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
else OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);
if (OpC[idx][1]==OpC[idx][2]){
clearInterval(OpC[idx][4]);
return;
}
}
var fadetime = 20;
var numdivs = 4,actDiv=-1,prev=null;
function fadeDivs(){
actDiv = (++actDiv)%numdivs;
if(prev)startOpChange(prev,0,1);
prev = document.getElementById('div'+(actDiv+1));
startOpChange(prev,100,1);
setTimeout('fadeDivs()',fadetime*1000);
}
</script>
</head>
<body onload="fadeDivs();">
<div id="container">
<div id="div1" class="fadediv" style="color:green;filter:alpha(opacity=0);-moz-opacity:0;">
Denne div er den første, som vises efter at siden er loadet, men den fader væk efter 20 sekunder, men kommer igen !-)
</div>
<div id="div2" class="fadediv" style="color:blue;filter:alpha(opacity=0);-moz-opacity:0;">
Denne div er den anden, som vises efter at siden er loadet, den fader ind efter 20 sekunder, og fader derefter væk efter yderligere 20 sekunder ...
</div>
<div id="div3" class="fadediv" style="color:coral;filter:alpha(opacity=0);-moz-opacity:0;">
Denne div er den tredje, som vises efter at siden er loadet, den fader ind efter 40 sekunder, og fader derefter væk efter yderligere 20 sekunder ...
</div>
<div id="div4" class="fadediv" style="color:orange;filter:alpha(opacity=0);-moz-opacity:0;">
Denne div er den fjerde, som vises efter at siden er loadet, den fader ind efter 60 sekunder, og fader derefter væk efter yderligere 20 sekunder ...
</div>
</div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
