Prøv lige at kopier dette ind i et dokument vindue i Dream. I HTML view selvfølgelig.
Så kan du tydeligt se hvordan det er lavet.
Hvis du har et billede som er højre end framen, når der rezises, så kan du ikke undgå at det vil ryge ned under frame kanten, billedet lader sig ikke rezise.
<html>
<head>
<meta http-equiv=content-type content=\"text/html;charset=iso-8859-1\">
<title>1</title>
<csscriptdict>
<script><!--
function CSScriptInit() {
CSStartSeq(\"Scene 1\");
}
CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf(\"/\")+1),10);
function IsIE() { return CSAg.indexOf(\"MSIE\") > 0;}
function CSIEStyl(s) { return document.all.tags(\"div\")[s].style; }
function CSNSStyl(s) { return CSFindElement(s,0); }
function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
var curDoc = ly ? ly.document : document; var elem = curDoc[n];
if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
return elem;
}
CSLoopIsRunning = false; CSFctArray = new Array; CSTimeoutID = null;
function CSLoop() {
CSLoopIsRunning = false;
for (i=0;i<CSFctArray.length;i++) {
var curFct = CSFctArray[i];
if (curFct) {
if (curFct.DoFunction(curFct)) { CSLoopIsRunning = true; curFct.counter++; }
else CSFctArray[i] = 0;
}
}
if (CSLoopIsRunning) CSTimeoutID = setTimeout(\"CSLoop()\", 1);
}
function CSStartFunction(fct,data) {
if (!CSLoopIsRunning) { CSFctArray = 0; CSFctArray = new Array; }
var fctInfo = new Object;
fctInfo.DoFunction = fct; fctInfo.counter = 0; fctInfo.data = data;
CSFctArray[CSFctArray.length] = fctInfo;
if (!CSLoopIsRunning) CSLoop();
}
function CSStopFunction(sceneName) {
var i;
for (i=0;i<CSFctArray.length;i++) {
var curFct = CSFctArray[i];
if (curFct){ if (curFct.data.name == sceneName){ CSFctArray[i] = 0; return; } }
}
}
function CSStopComplete() {
if (CSTimeoutID == null) return;
clearTimeout (CSTimeoutID); CSLoopIsRunning = false; CSTimeoutID = null;
}
function CSSetStylePos(s,d,p) { if (IsIE()) { if (d == 0) CSIEStyl(s).posLeft = p; else CSIEStyl(s).posTop = p; }
else { if (d == 0) CSNSStyl(s).left = p; else CSNSStyl(s).top = p; } }
function CSGetStylePos(s,d) { if (IsIE()) { if (d == 0) return CSIEStyl(s).posLeft; else return CSIEStyl(s).posTop; }
else { if (d == 0) return CSNSStyl(s).left; else return CSNSStyl(s).top; }}
function CSSetStyleVis(s,v) { if (IsIE()) CSIEStyl(s).visibility = (v == 0) ? \"hidden\" : \"visible\";
else CSNSStyl(s).visibility = (v == 0) ? \'hide\' : \'show\'; }
function CSGetStyleVis(s) { if (IsIE()) return (CSIEStyl(s).visibility == \"hidden\") ? 0 : 1;
else return (CSNSStyl(s).visibility == \'hide\') ? 0 : 1;}
function CSSetStyleDepth(style,depth) { if (IsIE()) CSIEStyl(style).zIndex = depth; else CSNSStyl(style).zIndex = depth;}
function CSGetStyleDepth(style) { if (IsIE()) return (CSIEStyl(style).zIndex); else return (CSNSStyl(style).zIndex); }
function CSSeqActionFct(seq,loopCount,continueLoop) {
if ((seq.loop < 2) || ((loopCount % 2) != 0)) {
for (var i=0;i<seq.actionCount;i++) {
if (seq.actions[3*i + 1] <= seq.frame) {
if ((loopCount > 1) && (seq.actions[3*i + 1] < seq.start)) continue;
if (seq.actions[3*i + 2] < loopCount) {
seq.actions[3*i + 2] = loopCount; CSLoopIsRunning = true;
CSAction(new Array(seq.actions[3*i + 0])); continueLoop = true;
}
} else { continueLoop = true; break; }
}
} else {
for (var i=seq.actionCount-1;i>=0;i--) {
if (seq.actions[3*i + 1] > seq.frame) {
if (seq.actions[3*i + 1] > seq.end) continue;
if (seq.actions[3*i + 2] < loopCount) {
seq.actions[3*i + 2] = loopCount; CSLoopIsRunning = true;
CSAction(new Array(seq.actions[3*i + 0])); continueLoop = true;
}
} else { continueLoop = true; break; }
}
}
return continueLoop;
}
function CSSeqFunction(fctInfo)
{
var seq = fctInfo.data; var oldFrame = seq.frame;
var newTicks = (new Date()).getTime();
seq.frame = Math.round((seq.fps * (newTicks - seq.startTicks)/1000.0) - 0.5);
var continueLoop = false; var loopCount = 1;
if (seq.loop > 0) {
continueLoop = true;
if (seq.loop == 1) {
var iv = (seq.end - seq.start);
var f = Math.round(((seq.frame - seq.start) / iv) - 0.5);
if (f < 0) f = 0;
loopCount = f+1;
seq.frame = seq.start + ((seq.frame - seq.start) % (seq.end - seq.start));
} else {
var iv = (seq.end - seq.start);
var f = Math.round(((seq.frame - seq.start) / iv) - 0.5);
if (f < 0) f = 0;
loopCount = f+1;
f = (seq.frame - seq.start) % (2 * iv);
if (f > iv) f = 2*iv - f;
seq.frame = seq.start + f;
}
}
continueLoop = CSSeqActionFct(seq,loopCount,continueLoop);
for (var i=0;i<seq.tracks.length;i++) {
var track = seq.tracks[i]; var frameCount = 0; var lastCount = 0; var partCount = 0;
var partIdx = track.parts.ticks.length;
for (var k=0;k<track.parts.ticks.length;k++) {
frameCount += track.parts.ticks[k];
if (frameCount > seq.frame) { partIdx = k; partCount = seq.frame - lastCount; break; }
lastCount = frameCount;
}
if (partIdx < track.parts.ticks.length) {
var type=track.parts.moveType[partIdx];
if(type==1) CSSetLinearPos (track, partIdx, partCount);
else if(type==2) CSSetCurvePos (track, partIdx, partCount);
else if(type==3) if (oldFrame != seq.frame) CSSetRandomPos (track, partIdx, partCount);
else { x = CSGetStylePos(track.layer,0); y = CSGetStylePos(track.layer,1); }
CSSetStyleVis(track.layer,track.parts.visibilities[partIdx]);
CSSetStyleDepth(track.layer,track.parts.depths[partIdx]);
continueLoop = true;
} else {
var partIdx = track.parts.moveType.length-1;
var posArray = track.parts.positions;
var x = posArray[partIdx * 6 + 0]; var y = posArray[partIdx * 6 + 1];
CSSetStylePos(track.layer,0,x); CSSetStylePos(track.layer,1,y);
CSSetStyleVis(track.layer,track.parts.visibilities[partIdx]);
CSSetStyleDepth(track.layer,track.parts.depths[partIdx]);
}
}
return continueLoop;
}
function CSSetLinearPos (track, partIdx, partCount) {
var curTicks = track.parts.ticks[partIdx];
var pIdx1 = partIdx * 6; var pIdx2 = (partIdx+1) * 6;
var posArray = track.parts.positions;
var x = posArray[pIdx1 + 0]; var y = posArray[pIdx1 + 1];
var x1,x2,y1,y2;
var factor = partCount/curTicks;
x1 = x; y1 = y;
x2 = posArray[pIdx2 + 0]; y2 = posArray[pIdx2 + 1];
x = x1 * (1-factor) + x2 * factor; y = y1 * (1-factor) + y2 * factor;
CSSetStylePos(track.layer,0,x); CSSetStylePos(track.layer,1,y);
}
function CSSetCurvePos (track, partIdx, partCount) {
var curTicks = track.parts.ticks[partIdx];
var pIdx1 = partIdx * 6; var pIdx2 = (partIdx+1) * 6;
var posArray = track.parts.positions;
var x = posArray[pIdx1 + 0]; var y = posArray[pIdx1 + 1];
var x1,x2,x3,x4,y1,y2,y3,y4;
var factor = partCount/curTicks;
var t = factor; var u = t * t; var v = u * t;
var val1 = 3*(u-t) - v + 1; var val2 = 3*(v+t - 2*u); var val3 = 3*(u-v); var val4 = v;
x1 = x; y1 = y; x2 = posArray[pIdx1 + 2]; y2 = posArray[pIdx1 + 3];
x3 = posArray[pIdx1 + 4]; y3 = posArray[pIdx1 + 5];
x4 = posArray[pIdx2 + 0]; y4 = posArray[pIdx2 + 1];
x = x1 * val1 + x2 * val2 + x3 * val3 + x4 * val4;
y = y1 * val1 + y2 * val2 + y3 * val3 + y4 * val4;
CSSetStylePos(track.layer,0,x); CSSetStylePos(track.layer,1,y);
}
function CSSetRandomPos (track, partIdx, partCount) {
var curTicks = track.parts.ticks[partIdx];
var pIdx1 = partIdx * 6; var pIdx2 = (partIdx+1) * 6;
var posArray = track.parts.positions;
var x = posArray[pIdx1 + 0]; var y = posArray[pIdx1 + 1];
var x1,x2,y1,y2;
var factor = partCount/curTicks;
x1 = x; y1 = y;
x2 = posArray[pIdx2 + 0]; y2 = posArray[pIdx2 + 1];
var factorx = Math.random(); var factory = Math.random();
x = x1 * (1-factorx) + x2 * factorx; y = y1 * (1-factory) + y2 * factory;
CSSetStylePos(track.layer,0,x); CSSetStylePos(track.layer,1,y);
}
function CSStartSeq(name) {
var seq = CSGetScene(name); var date = new Date()
seq.startTicks = date.getTime()
for (var i=0;i<seq.actionCount;i++) seq.actions[3*i+2] = 0;
CSStartFunction(CSSeqFunction,seq);
}
function CSSceneObj (name,fps,loop,start,end,frame,sTicks,numAct,acts,tracks) {
this.name=name;this.fps=fps;this.loop=loop;this.start=start;this.end=end;
this.frame=frame;this.startTicks=sTicks;this.actionCount=numAct;
this.actions=acts;this.tracks=tracks;
}
function CSTrackObj (name,partIdx,partCount,parts) {
this.layer=name;this.partIdx=partIdx;this.partCount=partCount;this.parts=parts;
}
function CSPartObj (ticks,pos,depths,vis,moveType) {
this.ticks=ticks;this.positions=pos;this.depths=depths;this.visibilities=vis;
this.moveType=moveType;
}
function CSGetScene (name) {
for (i=0;i<CSSeqArray.length;i++) { var seq = CSSeqArray[i]; if (seq.name==name) return seq; }
return 0;
}
CSSeqArray = new Array (new CSSceneObj(\"Scene 1\",15,1,0,107,0,0,0,new Array(),new Array(new CSTrackObj(\"layer\",0,0,new CSPartObj(new Array(24,51,0),new Array(597,379,604,353,611,327,612,301,615,168,612,35,610,-98,0,0,0,0),new Array(0,0,0),new Array(1,1,1),new Array(2,2,1))),
new CSTrackObj(\"layer2\",0,0,new CSPartObj(new Array(50,40,16,0),new Array(552,-99,575,-50,598,-1,600,51,601,109,556,163,562,222,566,266,597,302,628,338,0,0,0,0),new Array(0,0,0,0),new Array(1,1,1,1),new Array(2,2,2,1))),
new CSTrackObj(\"layer3\",0,0,new CSPartObj(new Array(15,24,47,0),new Array(490,346,515,461,560,433,592,204,0,0,0,0,526,112,0,0,0,0,635,-89,0,0,0,0),new Array(0,0,0,0),new Array(1,1,1,1),new Array(1,1,1,1))))));
// --></script>
</csscriptdict>
<cssequencer default=0>
</cssequencer>
<cssequence name=\"Scene 1\" fps=15 loop=on start=0 end=107 autoplay=on>
<cstrack layer=layer parts=0,597,379,-1,1,2,#ccccff,24,612,301,-1,1,2,#ccccff,75,610,-98,-1,1,1,#ccccff></cstrack>
<cstrack layer=layer2 parts=0,552,-99,-1,1,2,#ccccff,50,600,51,-1,1,2,#ccccff,90,562,222,-1,1,2,#ccccff,106,628,338,-1,1,1,#ccccff></cstrack>
<cstrack layer=layer3 parts=0,490,346,-1,1,1,#ccccff,15,592,204,-1,1,1,#ccccff,39,526,112,-1,1,1,#ccccff,86,635,-89,-1,1,1,#ccccff></cstrack>
</cssequence>
<style type=text/css><!--
#layer { position: absolute; top: 379px; left: 597px; width: 100px; height: 100px; visibility: visible }
#layer2 { position: absolute; top: -99px; left: 552px; width: 100px; height: 100px; visibility: visible }
#layer3 { position: absolute; top: 346px; left: 490px; width: 100px; height: 100px; visibility: visible }-->
</style>
</head>
<body bgcolor=#ffcc66 onload=CSScriptInit();>
<table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
<tr>
<td width=70% align=left valign=bottom><img src=gif/wwagen.gif lowsrc=gif/wwagenl.gif width=441 height=196 alt=\"eyesaw autumn special\"></td>
<td align=center valign=bottom width=30%>
<div id=layer>
<img src=gif/blob.gif width=57 height=58></div>
<div id=layer2>
<img src=gif/blob.gif width=57 height=58></div>
<div id=layer3>
<img src=gif/blob.gif width=57 height=58></div>
</td>
</tr>
</table>
</body>
</html>
