Problem med nedrullende "reklameskilt"
Jeg er rimeligt ny i javascript og sidder lige pt. og hygger mig med at lave et reklameskilte, der skal rulle på plads når siden loades og derefter kunne rulles op igen med et klik på en knap/link.Scriptet fungerer pt. fint til at rulle skiltet ned, men det ruller det ikke op igen - kan i hjælpe mig med at finde ud af hvad der går galt?
Scriptet ser således ud:
var clipBottom = 200;
var clipRight = 700;
var strStartBottom = 200;
var strStartRight = 700;
var innerTop = 0;
var innerLeft = 0;
var minHeight = 20;
var minWidth = 700;
var speed = 25;
function GetWidth() {
elm = document.getElementById('WidthSpan');
for(var zx=zy=zw=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
zw = document.getElementById("WidthSpan").offsetWidth;
document.getElementById("div1").style.left = zx;
document.getElementById("div1").style.width = zw;
document.getElementById("strTable1").style.width = zw;
strStartRight = zw;
clipRight = 10;
clipBottom = 10;
innerTop = -strStartBottom +10;
innerLeft = -strStartRight +10;
document.getElementById("div1").style.clip = 'rect(0px, '+clipRight+'px, '+clipBottom+'px, 0px)';
rollCom(2);
}
function rollCom(Cdir){
switch(Cdir) {
case 1:
if (document.getElementById("UpLink").style.visibility == 'visible') {
document.getElementById("UpLink").style.visibility = 'hidden';
document.getElementById("UpLink").style.position = 'absolute';
document.getElementById("DownLink").style.visibility = 'visible';
document.getElementById("DownLink").style.position = 'relative';
}
if (clipBottom > minHeight){
clipBottom -= 2;
innerTop -= 2;
}
if (clipRight > minWidth){
clipRight -= 4;
innerLeft -= 4;
}
break;
case 2:
if (document.getElementById("DownLink").style.visibility == 'visible') {
document.getElementById("DownLink").style.visibility = 'hidden';
document.getElementById("DownLink").style.position = 'absolute';
document.getElementById("UpLink").style.visibility = 'visible';
document.getElementById("UpLink").style.position = 'relative';
}
if (clipBottom < strStartBottom){
clipBottom +=2;
innerTop +=2;
}
if (clipRight < strStartRight){
clipRight +=6;
innerLeft +=6;
}
if (clipBottom >= strStartBottom && clipRight >= strStartRight){
window.clearTimeout(rollTimer)
}
break;
}
document.getElementById("div1").style.clip = 'rect(0px, '+clipRight+'px, '+clipBottom+'px, 0px)';
document.getElementById("commercial").style.top = innerTop;
document.getElementById("commercial").style.left = innerLeft;
rollTimer = window.setTimeout("rollCom(" + Cdir + ")", speed);
}
Og resten af HTML-dokumentet således:
<body onload="GetWidth();">
<div id="div1" style="position:absolute;width:100%;height:200px;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);z-index:6;">
<div id="commercial" style="position:relative;z-index:6;">
<table id="strTable1" width="700px" height="200px" bgcolor="#C0C0C0">
<tr>
<td valign="bottom" align="right">
<b> </b><br>
<img src="../kongsfelt.dk/in-media/images/fulllogo_small.gif"><br>
<div id="UpLink" style="position:relative;visibility:visible;"><a href="java script:rollCom(1);">Luk annoncen</a></div>
<div id="DownLink" style="position:absolute;visibility:hidden;"><a href="java script:rollCom(2);">Åben annoncen</a></div>
</td>
</tr>
</table>
</div>
</div>
<table width="100%" border="1">
<tr>
<td>fasælkkasfksøkaføasøf</td>
<td width="100%" id="WidthSpan">
Noget indhold
</td>
<td>fasælkkasfksøkaføasøf</td>
</table>
