Ikke alle problemer er løst, men det virker både i IE6 og Mozilla1.5, og dermed sandsynligvis også de nyere Netscape og andre Gecko-browsere ...
(der findes et blendTrans-filter i IE, som kunne have løst den mere direkte, men jeg arbejdede videre med det ud fra min egen filosofi om, at man kun laver browser-specifikke løsninger, når der ikke er andre muligheder !-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Ved onmouseover vis pic ovenpå pic + tekst + pic i celle</title>
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/458054"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.stortBillede{
position:absolute;
top:0px;
left:0px;
width:200px;
height:200px;
background:url('../eksperten_logo_new.gif');
}
tr{
position:relative;
top:0px;
left:0px;
}
.picTd{
position:relative;
top:0px;
left:0px;
width:220px;
height:220px;
padding:0px;
margin:0px;
border:0px;
vertical-align:top;
}
#billedTekst{
text-align:center;
font-family:tahoma,verdana,sans-serif;
font-size:large;
}
.miniPicDiv{
position:relative;
float:left;
margin:3px;
}
.miniPic{
width:60px;
height:60px;
}
</style>
<script 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)));
if(10>delayTime){
var mult = Math.ceil(10/delayTime);
delayTime *= mult;
OpC[idx][3] *= mult;
}
//alert(tim+"\n"+tim*1000+"\n"+delayTime);
OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
}
}
function opChange(idx){
OpC[idx][1]+=OpC[idx][3];
if(OpC[idx][1]>100)OpC[idx][1]=100;
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 bil = new Array();
var actBil = 1;
function initStBil(){
bil[0] = document.getElementById('billed1');
bil[1] = document.getElementById('billed2');
bil[2] = document.getElementById('billed3');
bil[3] = document.getElementById('billed4');
bil[4] = document.getElementById('billed5');
}
function show(act,obj,txt){
if(act==1){
startOpChange(bil[actBil],0,0.5);
actBil = (actBil+1)%5;
startOpChange(bil[actBil],100,0.5);
bil[actBil].src = obj.src;
document.getElementById('billedTekst').innerHTML = txt;
}else{
}
}
function restoreOrg(){
for(i=0;bil.length>i;i++){
bil[i].src = bil[i].lowsrc;
}
}
</script>
<body onload="initStBil();">
<table style="border-collapse:collapse;position:relative;top:0px;left:0px;">
<tr>
<td class="picTd">
<img id="billed1" class="stortBillede" src="../eksperten_logo_new.gif" lowsrc="../eksperten_logo_new.gif" alt="" style="filter:alpha(opacity=0);-moz-opacity:0;">
<img id="billed2" class="stortBillede" src="../eksperten_logo_new.gif" lowsrc="../eksperten_logo_new.gif" alt="" style="filter:alpha(opacity=100);-moz-opacity:1;"></td>
<img id="billed3" class="stortBillede" src="../eksperten_logo_new.gif" lowsrc="../eksperten_logo_new.gif" alt="" style="filter:alpha(opacity=0);-moz-opacity:0;">
<img id="billed4" class="stortBillede" src="../eksperten_logo_new.gif" lowsrc="../eksperten_logo_new.gif" alt="" style="filter:alpha(opacity=0);-moz-opacity:0;">
<img id="billed5" class="stortBillede" src="../eksperten_logo_new.gif" lowsrc="../eksperten_logo_new.gif" alt="" style="filter:alpha(opacity=0);-moz-opacity:0;">
<td class="picTd" style="vertical-align:middle;">
<div id="billedTekst">BilledTekst</div></td>
</tr>
<tr>
<td class="picTd" colspan="2"><!-- onmouseout="restoreOrg();" -->
<div class="miniPicDiv">
<img class="miniPic" src="../billede.jpg" alt="Vis billede" onmouseover="show(1,this,'<br>Forside-billede fra \47The Players Guide to the DragonLance Campain\47, 1993 <br>-- Dragonlance \4785 <br>tegnet af <a href=\42http://larryelmore.com\42 target=\42_blank\42 style=\42background:inherit;text-decoration:none;color:#8D1D31;\42 title=\42Larry\47s hjemmeside\42>Larry Elmore</a><br>Nr. 1');">
</div>
<div class="miniPicDiv">
<img class="miniPic" src="../eksperten_logo_new.gif" alt="Vis billede" onmouseover="show(1,this,'Ekspertens Logo<br>Nr. 2');">
</div>
<div class="miniPicDiv">
<img class="miniPic" src="../eksperten_logo_new.gif" alt="Vis billede" onmouseover="show(1,this,'Ekspertens Logo<br>Nr. 3');">
</div></td>
</tr>
</table>
</body>
</html>
