Ved f.eks. at sætte teksten ind i et <div>- eller <span>-tag og sætte den kode, som er på billederne ind:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Fade in - fade out</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK HREF="style/style.css" REL="stylesheet" TYPE="text/css">
<style type="text/css">
body{padding:10px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:center;background:#EBD3E2;line-height:1.5;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;
}
}
</script>
</head>
<body style="font-size:12px;">
<h1 style="line-height:0.8">Working demo #5</h1>
Fade in - fade out på elementer<br><br>
<div name="fisk" alt="Fade-billede" style="float:left;width:250px;height:250px;filter:alpha(opacity=10);-moz-opacity:0.1;" onMouseOver="startOpChange(this,100,1);" onMouseOut="startOpChange(this,10,1);" title="Klik for at se koden" onclick="window.open('Kode/WD5Kode.html','VisKilde','width=800,height=400,scrollbars,resizable');">Denne tekst fader in ved mouseover og fader ud ved mousein</div>
<img src="img/billede.jpg" width="250" height="250" name="fisk2" alt="Fade-billede" style="filter:alpha(opacity=60);-moz-opacity:0.6;" onMouseOver="startOpChange(this,100,1);" onMouseOut="startOpChange(this,60,1);" title="Klik for at se koden" onclick="window.open('Kode/WD5Kode.html','VisKilde','width=800,height=400,scrollbars,resizable');">
<br><br>
Denne demo illustrerer en javascript-funktion, som fader et vilkårligt antal elementer ind eller ud<br>
-- her illustreret med mouseover og mouseout på images ...<br>
</body>
</html>