fulio said:
Description of the projects is in the following page:
As tested on MSIE7, MSIE8, SeaMonkey 2.0.11, Firefox 3.6.13, Chrome
9.0.597.107 and Opera 9.22:
<html>
<head>
<title>Moving Arrows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form method="get" action="" onSubmit="return false;">
<div id="ar1"
style="position:absolute; left:10px; top:5px; color:blue;">
↓ ↓ ↓
</div>
<div style="position: absolute; left: 10px; top: 100px;">
<input name="b1" type="button" value="start"
onClick="f.b1.disabled=true;p=0;s1();">
<input name="b2" type="button" value="stop"
onClick="f.b1.disabled=false;p==1?p=0
=1;">
</div>
<div id="ar2"
style="position:absolute; left:10px; top:200px; color:red;">
→
</div>
<div id="ar3"
style="position:absolute; left:200px; top:200px;">
→
</div>
<div style="position:absolute; left:10px; top:230px;">
<input name="b3" type="button" value="start"
onClick="f.b3.disabled=true;t=10;s2();">
<input name="b4" type="button" value="reset"
onClick="res();">
</div>
</form>
<script type="text/javascript">
var u = 5;
var r = 0;
var t = 10;
var p = 0;
f = document.forms[0];
function s1() {
if (p == 0) {
document.getElementById('ar1').style.top = u;
if (r==0) {
++u;
if (u==70) r=1;
}
else {
--u;
if (u==5) r=0;
}
setTimeout('s1()', 5);
}
}
function s2() {
document.getElementById('ar2').style.left = t;
if (t==200) {
f.b3.disabled=false;
return;
}
++t;
setTimeout('s2()', 5);
}
function res() {
f.b3.disabled=false;
t=200;
setTimeout("document.getElementById('ar2').style.left=10",50);
}
</script>
</body>
</html>
-------------------------------------------
object.style.left should be 'px', since pixels were used at time of
assignment.
Not my habit, but I'm leaving out DOCTYPE here; it appears to screw up
object.style.left and object.style.top calls (except MSIE7/8).
You could use z-indexes to add text between/over/under the arrows.
Hope this helps,
