Og så i en udgave, som alt andet lige burde være fuldstændig kompatibel ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Fade transition billeder</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/599649"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#imgcontainer{
position:relative;
top:0px;
left:0px;
}
.orgImg{
height:70px;
}
.fadeImg{
height:400px;
top:0px;
left:0px;
z-index:1;
}
</style>
<script type="text/javascript" language="JavaScript">
var OpC = new Array(),ie,moz,css3;
function startOpChange(elm,end,tim){
if(!ie&&!moz&&!css3)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();
actOp=(ie)?elm.filters.alpha.opacity:(moz)?Math.round((elm.style.MozOpacity*100)):Math.round((elm.style.opacity*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 if(moz)OpC[idx][0].style.MozOpacity=Math.min(0.9999,OpC[idx][1]/100);
else OpC[idx][0].style.opacity=Math.min(0.9999,OpC[idx][1]/100);
if (OpC[idx][1]==OpC[idx][2]){
clearInterval(OpC[idx][4]);
return;
}
}
var actElm,altElm;
window.onload=function(){
actElm = document.getElementById('img0');
altElm = document.getElementById('img1');
ie = (actElm.filters)?true:false;
moz = (actElm.style.MozOpacity != 'undefined');
css3 = (actElm.style.opacity != 'undefined');
}
function fadeOver(pic,dir){
var tmp = altElm;
altElm = actElm;
actElm = tmp;
trg = actElm;
elm = altElm;
trg.src = pic.src;
sl = 100;//(dir==1)?100:0;
startOpChange(trg,sl,1);
startOpChange(elm,100-sl,1);
}
</script>
</head>
<body>
<div id="imgcontainer">
<img id="img0" src="../billede.jpg" class="fadeImg" style="filter:alpha(opacity=100);-moz-opacity:1;opacity:1"><img id="img1" src="" alt="eksperten_logo_new.gif" class="fadeImg" style="filter:alpha(opacity=0);-moz-opacity:0;opacity:0;position:absolute;z-index:0;">
</div>
<table>
<tr>
<td>
<img src="../billede.jpg" alt="billede.jpg" class="orgImg" onmouseover="fadeOver(this)">
<img src="../eksperten_logo_new.gif" alt="eksperten_logo_new.gif" class="orgImg" onmouseover="fadeOver(this)"></td>
<td>
</td>
</tr>
</table>
</body>
Ny bruger
Nybegynder
Opret
Preview
