Jeg har så valgt den nemme løsning, hvor alle tre billeder i virkeligeheden findes samtidig oven på hinanden, man kunne også forestille sig, at man kunne bruge de samme to billeder frem og tilbage, som i rotations-tingen, men med 3 er dette det nemmeste (og mindst blinkende !-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Fade transition</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/481785"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#imgcontainer{
position:relative;
top:0px;
left:0px;
float:left;
}
.orgImg{
height:200px;
}
.fadeImg{
height:400px;
top:0px;
left:0px;
z-index:1;
}
</style>
<script type="text/javascript" language="JavaScript">
var OpC = new Array();
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=Math.round((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.9999,OpC[idx][1]/100);
if (OpC[idx][1]==OpC[idx][2]){
clearInterval(OpC[idx][4]);
return;
}
}
function fadeOver(elm,trg,dir){
trg = document.getElementById(trg);
elm = document.getElementById(elm);
sl = (dir==0)?100:0;
startOpChange(trg,sl,2);
startOpChange(elm,100-sl,2);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="../billede2.jpg" alt="../billede2.jpg" class="orgImg" onmouseover="fadeOver('img2','img1',1)" onmouseout="fadeOver('img2','img1',0)"><br>
<img src="../billede3.jpg" alt="../billede3.jpg" class="orgImg" onmouseover="fadeOver('img3','img1',1)" onmouseout="fadeOver('img3','img1',0)"></td>
<td>
<div id="imgcontainer">
<img id="img1" src="../billede.jpg" class="fadeImg" style="filter:alpha(opacity=100);-moz-opacity:1;"><img id="img2" src="../billede2.jpg" alt="../billede2.jpg" class="fadeImg" style="filter:alpha(opacity=0);-moz-opacity:0;position:absolute;z-index:0;"><img id="img3" src="../billede3.jpg" alt="../billede3.jpg" class="fadeImg" style="filter:alpha(opacity=0);-moz-opacity:0;position:absolute;z-index:0;">
</div></td>
</tr>
</table>
</body>
